html - 将 <div> 在页面上垂直和水平居中的最佳方式？

Question

<分区>

Answer 1

最好最灵活的方式

这个演示中的主要技巧是在元素从上到下的正常流动中，因此 margin-top: auto 设置为零。然而，绝对定位的元素对于自由空间的分配行为相同，并且类似地可以在指定的 top 和 bottom 垂直居中(在 IE7 中不起作用)。

##这个技巧适用于任何大小的 div。

div {
    width: 100px;
    height: 100px;
    background-color: red;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}

<div></div>