我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中?直到现在.但是,请注意！想让元素绝对居中,只需要声明元素高度,并且附加以下样式,就可以做到：
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}我并不是第一个发现这种方法的人（不过我还是敢把它叫做"完全居中"）,它有可能是种非常普遍的技巧.但大多数介绍垂直居中的文章中并没有提到过这种方法.
以前从未用过这种方法的我想试试,看看这种"完全居中"的方法到底有多么神奇. 好处：
无特殊标记,样式更精简
自适应布局,可以使用百分比和最大最小高宽等样式
居中时不考虑元素的padding值（也不需要使用box-sizing样式）
布局块可以自由调节大小
img的图像也可以使用
同时注意：
必须声明元素高度
推荐设置overflow:auto;样式避免元素溢出,显示不正常的问题
这种方法在Windows Phone上不起作用
对照表
"完全居中"并不是本篇文章中唯一的选项.要做到垂直居中,还存在着其他方法,各有各的长处.采取什么样的方法,取决于你所支持的浏览器,以及现有标签的结构.下面这张对照表能够帮你选出最符合你需要的方法.
说明
在研究了规范和文档后,我总结出了"完全居中"的工作原理：
① 在普通文档流里,margin: auto; 的意思是设置元素的margin-top和margin-bottom为0.使用"完全居中",有意遵照了标准margin: auto; 样式渲染的规定,所以应当在与标准兼容的各种浏览器中起作用.
以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用，就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！