Question

我正在尝试将div width和height设置为auto，使其在屏幕上居中，垂直和水平。这是我目前所做的CSS，请任何帮助。

 #popup {
    position: absolute;
    margin: auto;
    height: auto;
    width: auto;
    display: table;
    padding: 10px;
    max-width: 650px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 1

你可以这样做：

<强> CSS

#popup {
    position: absolute;
    margin: auto;
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    height: auto;
    width: auto;
    display: table;
    padding: 10px;
    max-width: 650px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<强> DEMO HERE

Answer 2

试试这个https://jsfiddle.net/2Lzo9vfc/13/

HTML

<div class="page">
    <div class="content">
        <div class="div">
            <p>THIS IS CONTENT</p>
        </div>
    </div>
</div>

CSS

.page {
    height: 100vh;
    width: 100%;
    display: table;
}

.content {
    display: table-row;
}

.div {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

垂直和水平对齐没有尺寸的div

2 个答案: