CSS实现**元素居中的方法

时间：2016.04.21 发布人：xjaczgw

已解决问题

谷歌xjaczgw用户在2016.04.21提交了关于“吉利熊猫CSS实现**元素居中的方法”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-03-01T02:22:55。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，谢了,下次有事儿别忘了找我！

希望以下的回答，能够帮助你。

用户名：ddxzp 时间：2016.04.22

　　绝对**元素的居中实现

　　如果要问如何CSS实现绝对**元素的居中效果，很多人心里已问答经有答案了。

　　兼容性不错的主流用法是：

认川环　　CSSCode复制内容冲病代提适短流帮么认到剪贴板

　　.element{

　　width:600px;h飞营然林别提苦松持eight:400曲尼珐京华这评px;

　　position:absolute;left:50%;top:50%;

　　ma演刚世专能受期评通听rgin-top:-200着源政任价px;/*高度的一半系改英力确钱候零按松非*/

　　margin-left:-300px;/象病听米倍剂*宽度的一半*/

　　}

　　但，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无目主小查经声器含法精确。此时，往始急杨决缩洋推贵须根者往要借助JS获得。

　　沉酸创CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin.transform中translate偏移良诉的百分比值是相对于自身大小的绝，于是，我们可以：

　　C李还确良客热宁源SSCode复制内容到剪贴板

　　.element{

　　width:600px;h婷快合编器事雷非茶选翻eight:400虽脚等站热止左再机容px;

　　position:absolute;left:50广城断坚%;top:50%;

　　transform:translate(-50%,-50%);/*50%为自身尺寸的一穿屋委排面被经半*/

　　}

　　于是乎，无论绝对**元素的尺寸是多少，其都是水平垂直居中显示的。

　　然，问题很明显，兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。

　　实际上，绝对**元素的居中实现还有另外一种方法，可以说是权衡了上面的尺寸自适应以及兼容性的一个方案，其实现的核心是margin:auto.

　　margin:auto实现绝对**元素的居中

　　首先，我们来看下CSS代码：

　　CSSCode复制内容到剪贴板

　　.element{

　　width:600px;height:400px;

　　position:absolute;left:0;top:0;rightright:0;bottombottom:0;

　　margin:auto;/*有了这个就自动居中了*/

　　}

　　代码两个关键点：

　　上下左右均0位置**;

　　margin:auto

　　于是，就居中了。上面代码的width:600pxheight:400px仅是示意，你修改为其他尺寸，或者不设置尺寸(需要是图片这种自身包含尺寸的元素)，都是居中显示的。很有意思的~~

　　您可以狠狠地点击这里：margin:auto与绝对**元素的垂直居中demo