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

通过将左边距和右边距设置为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元素的起源在左上角，所以你必须稍微改变它。这就是利润所在。

需要保证金左/右帮助

1 个答案: