css - 需要边距左/右帮助

Question

我在水平居中画布时遇到问题。显示：添加表格以使其垂直居中。很奇怪。

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

#container {
    border: solid 1px #000;
    height: 100%;
    width: 85%;
    position: absolute;
    right: 0;
    display:table;
}

#container2 {
    display:table-cell;
    vertical-align:middle;
}

#container img {
    max-width: 100%;
    max-height: 100%;   
}​

<div id="container">
    <div id="container2">
    <img src="http://cultureandcommunication.org/tdm/nmrs/fa1/files/2010/10/lolcats4.jpg" />
    </div>
</div>​

jsfiddle.net/tGtDv/1

Answer 1

块元素可以通过设置 margin left 和 right 来居中auto。

div.container2 {
    margin-left: auto;
    margin-right: auto;
}

如果你想水平和垂直对齐中心，你需要一种不同的方法来设置宽度和高度。

div.container2 {
    height: 200px;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    /* position: absolute; */
    position: fixed;
    top: 50%;
    width: 200px;
}

在这种情况下，您将元素定位在其父元素左侧 50% 和右侧 50% 的位置。因为 HTML 元素的原点位于左上角，所以您必须稍微移动一下。这就是利润的用途。