Question

我按照一些指南将div设置为垂直和水平居中，但它不起作用。

<div class="c">center</div>

html, body {
    height: 100%;
}
.c {
    background: grey;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

Answer 1

一种选择是将margin: auto添加到元素中。在现代浏览器中，这将使元素水平/垂直居中。

有关水平/垂直居中元素的更多方法，请参阅this answer。

Updated Example

＆＃13;

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.c {
    background: grey;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

＆＃13;

<div class="c">center</div>

＆＃13;

Answer 2

你已经将你的元素设置为宽度为50％，但你没有设置任何其他位置，然后是上/左等零值。将你的上下左边设置为50％并转换位置，如下所示：

.c {
    background: grey;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Answer 3

您尚未在代码中的任何位置设置边距。只需将此margin:auto放在 .c 类中即可。例如http://jsfiddle.net/ony80a5d/4/

Answer 4

如果您的宽度和高度为50％，为什么不使用

left:25%;
top: 25%;

使用绝对位置水平和垂直居中div

4 个答案: