css之居中布局的实现的几种方式

方式一：margin:0 auto实现div水平垂直居中；

示例：

.wrap{
  margin：0 auto;
}
w3cschool

方式二：利用line-height和height为同一高度可实现文字的水平居中；

示例：

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
  height: 200px;
  font-size: 36px;
  background-color: #ccc;
}
w3cschool

方式三：利用padding和background-clip配合实现div的水平垂直居中；

示例：

 

.parent{
margin:0 auto;
width:200px;
height:200px;
background-color:red;
}
.children {
width: 100px;
height: 100px;
padding: 50px;
background-color: black;
background-clip:content-box;/*居中的关键*/

方式四：对于不定高和宽的div，可以用绝对定位和translate(-50%,-50%) 实现div水平垂直居中

示例：

Hello World

方式五：绝对定位居中加margin: auto实现子div在父div中居中

示例：

    
 
Hello World

方式六：用css3的flex实现水平垂直居中

示例：

  
我是通过flex的水平垂直居中噢！

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

方式七：vertical-align 属性设置元素的垂直对齐方式。

说明：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

image.png