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

Question

居中的最佳方法 <div>页面上的元素垂直和水平？

我知道 margin-left: auto; margin-right: auto;将以水平居中，但垂直居中的最佳方式是什么？

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>