css实现水平居

代码示例

1.  
   <div class="box">
2.  
   <div class="box1"></div>
3.  
   </div>

1.弹性布局：（推荐）

display:flex；

 这些要添加在父级的，是父级的属性

 //父级添加display:flex;

 //父级添加justify-content:center;

1.  
   .box{
2.  
   width: 500px;
3.  
   height: 300px;
4.  
   background-color: aquamarine;
5.  
   display: flex;
6.  
   /*主轴-x轴：居中*/
7.  
   justify-content: center;
8.  
   }
9.  
   .box1{
10.  
    width: 200px;
11.  
    height: 100px;
12.  
    background-color: lightpink;
13.  
    }

效果图: 

2.添加margin值auto

外边距可以让块级盒子水平居中，但是必须满足两个条件：

①盒子必须指定了宽度

②盒子左右的外边距都设置为auto

 .header{

      width:960px;

      margin:0 auto;

}

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-ali gn:center;

1.  
   .box{
2.  
   width: 500px;
3.  
   height: 300px;
4.  
   background-color: aquamarine;
5.  
    
6.  
   }
7.  
   .box1{
8.  
   width: 200px;
9.  
   height: 100px;
10.  
    background-color: lightpink;
11.  
    margin: 0 auto;
12.  
    }

 3.text-align:center 行内块元素 

1.  
   .box{
2.  
   width: 500px;
3.  
   height: 300px;
4.  
   background-color: aquamarine;
5.  
   text-align: center; //父级添加text-align: center;
6.  
   }
7.  
   .box1{
8.  
   width: 200px;
9.  
   height: 100px;
10.  
    background-color: lightpink;
11.  
    display: inline-block; //把div变为行内块元素
12.  
    }

这篇好文章是转载于：编程之路