css实现水平居中

weixin_30528371

于 2018-10-10 10:13:00 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/izhangliang/p/9764787.html

本文详细介绍了如何使用CSS margin属性实现div元素的水平居中，通过设置盒子的宽度和margin的左右值为“auto”，轻松实现div盒子的完美居中效果。

这里我只介绍使用margin实现水平居中的方法，不多说看代码！

html代码：

我们先创建一个div盒子：

<div class="box"></div>

然后用css实现盒子的居中

其实css实现居中的思路很简单，给盒子一个宽度，然后再设置盒子margin的左右值为“auto”，就可以实现div盒子的居中了

.box{
     width：200px; 
     height:200px;
     background:#333;
     margin:0 auto;            
}

转载于:https://www.cnblogs.com/izhangliang/p/9764787.html