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

时间:2015-10-30 08:59:41

标签: html css

我正在尝试将div widthheight设置为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;
}

2 个答案:

答案 0 :(得分:2)

你可以这样做:

<强> 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

答案 1 :(得分:0)

试试这个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;
}