在页面上垂直和水平居中放置的最佳方法？

在页面上垂直和水平居中放置的最佳方法？

该演示的主要技巧是元素的正常流动是从上到下，因此将

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>