Question

我是HTML＆amp; CSS。我试过下面的代码

<!DOCTYPE html>

<html>
<head>
<title>Center</title>
</head>

<body>
    <div id="div1" style="width:300;background-color:olive">
        <div id="div2" style="width:100px; margin-left:auto; margin-right:auto; background-color:gray"></div>
    </div>  
</body>

</html>

＆＃34; div2＆＃34;是水平居中。

然后我将宽度改为高度＆amp; margin-left / right to margin-top / bottom。（下面的代码）

<!DOCTYPE html>

<html>
<head>
<title>Center</title>
</head>

<body>
    <div id="div1" style="height:100px;background-color:olive">
        <div id="div2" style="height:20px; margin-top:auto; margin-bottom:auto; background-color:gray"></div>
    </div>  
</body>

</html>

它没有像我预期的那样垂直居中。

任何可以帮我解释一下，为什么他们没有相同的行为？谢谢，晃

Answer 1

margin-auto仅适用于水平边距。即margin-left and right。

您无法将垂直边距设置为自动。相反，你可以使它成为一个内联块并将其垂直设置在中间。阅读this answer

MDN says：

margin: auto;  /* box is horizontally centered, 0 margin on top and bottom */

Answer 2

我在下面试过

<!DOCTYPE html>

<html style="height:100%">
<head>
<title>Center</title>
</head>

<body style="height:100%; width:100%">
    <div style="display:table; width:100%; height:100%">
        <div id="div1" style="display:table-cell;vertical-align:middle">
            <div id="div2" style="display:table-cell;vertical-align:middle;height:20px; margin:0 auto; background-color:gray">Text is vertical alignment</div>
        </div>
    </div>  
</body>

</html>

边距 - 顶部/底部不适用于样本中的左边/右边距

2 个答案: