文字

一、单行文字

HTML

<div class="container1">
    <div class="container2">content</div>
</div>

CSS

.container2{
   line-height:400px;
   height:400px; /*垂直居中*/
   text-align:center;/*水平居中*/
}

注：

• 这种方法只适合于单行文字水平垂直居中;
• content相对于container2块级包含框水平、垂直居中。要达到垂直居中，只需ling-height和height值一致即可。
• 当 box-sizing: content-box; 时(这也是默认的值)。将 height 和 line-height 的值设置为一样就行了;当 box-sizing: border-box; 时, line-height的值要从 height 里减去 padding-top, padding-bottom, border-top, border-bottom 四个的值，也就是和分配给内容的有效高度相等。

二、不确定高度的一段文本垂直居中

HTML

<div class="container1">
    <div class="container2">content</div>
</div>

CSS

.container2{
  width:200px;
  padding-top:30px;
  padding-bottom:30px;
  background-color: #B2A04A;
}

注：

• 设置padding-top和padding-bottom值相等，若还要文字段水平居中，则加padding-left和padding-right值相等即可；
• text-align: center; 能将文本按照两端对其的方式对文本进行布局；
• content相对于container2块级包含框水平、垂直居中,这里“不确定高度”是指container2框高度不确定，其高度是随着文字的多少而变化的。

三、确定高度的一段文本水平垂直居中

HTML

<div class="container1">
    <div class="container2">content</div>
</div>

CSS

.container1{
  width:200px;
  height:150px;
  display:flex;
  align-items:center;/*让子元素垂直居中*/
  justify-content:center;/*让子元素水平居中*/
}
.container2{
  background-color:#104C4A;
}

注：

• 利用CSS3伸缩布局，移动端首选；通用于让一切确定高度的包含框的子元素水平垂直居中，使用范围比较广；
• 设置display:flex;align-items:center;justify-content:center;三个属性。
• container2相对于container1块级包含框水平、垂直居中。
• 如果不添加 justify-content: center; 子元素不会水平居中;如果不添加 align-items: center; 子元素会铺满父元素的高度，而不是我们希望的只有包含住文本的高度!
• IE10 及以上版本浏览器支持，chrome, firefox, opera, edge 均支持，不需要添加厂商前缀。

块级元素

一、确定宽高的块级元素水平垂直居中

方法1.纯positon

HTML

<div class="container1">
    <div class="container2">content</div>
</div>

CSS

.container1{
  width:400px;
  height:300px;
  background-color:#000;  
  position:relative; 
}
/*方法一*/
.container2{  
  width:200px;
  height:200px;
  position: absolute;
  top: 50px; /* (300-200)/2 */
  left: 100px; /* (400-200)/2 */
  background-color:#104C4A;
}

/*方法二*/
.container2{  
  width:200px;
  height:200px;
  position: absolute;
  top: 50%; /*固定*/
  left: 50%; /*固定*/
  margin-left:-100px;/* 子元素宽度/2的负值 */
  margin-top:-100px; /* 子元素高度/2的负值 */
  background-color:#104C4A;
}

方法2.position+margin

HTML

<div class="container1">
    <div class="container2">content</div>
</div>

CSS

  .container1{    
  width:400px;
  height:300px;
  background-color:#000;
  position: relative;
}
.container2{ 
  width:200px;
  height:200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:#104C4A;
  margin: auto;
}

注：

• 对父元素要使用 position: relative;对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。如果只需要垂直居中，right: 0; 和 left: 0; 可以省略不写，margin: auto可以换成 margin-top: auto; margin-bottom: auto;;如果只需要水平居中，top: 0; bottom: 0; 可以省略不写,margin: auto; 可以换成 margin-rihgt: auto; margin-left: auto;
• 兼容性：主流浏览器均支持，IE6不支持；
• 对于确定高度的块级元素推荐用此种方法。

方法3.让浏览器计算子元素的宽高并让其水平垂直居中

HTML

<div class="container1">
    <div class="container2">content</div>
</div>

CSS

.container1{
  width:200px;
  height:200px;
  background-color:#000; 
  position: relative;  
}
.container2{
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 20%;
  right: 20%;
  background-color:#104C4A;
 
}

注：

• 通过使用定位position: absolute; top:…; right: …; bottom: …; left: …; 四个方向上的值缺一不可。

二、不确定宽高的块级元素水平垂直居中

方法1.position+transform

HTML

<div class="container1">
    <div class="container2">content</div>
</div>

CSS

.container1{ 
  width:400px;
  height:300px;
  background-color:#000; 
}
.container2{  
  position: relative;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  background-color:#104C4A; 
}

注：

• 通过设置 transform: translate(-50%,-50%);position都可以为relative，也可以相对于container1绝对定位；
• 兼容性：ie9以下不支持 transform，手机端表现的比较好；添加厂商前缀 -webkit- 兼容 Safari 和 Chrome。
• 也可用于container2宽高固定时。

方法2.display:table-cell

HTML

<div class="table">
  <div class="tableCell">
    <div class="content">content
    </div>
  </div>
</div>

CSS

.table{
    width: 500px;
    height: 500px;
    display: table;
    background-color: yellow;
  } 
.tableCell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 10px;    
  }

/*低版本 IE fix bug：
  #tableCell{
    display: inline-block;
  } */

.content{ 
    background-color: red;
  }

注：

• content框相对于tableCell框水平垂直居中；
• 将cell垂直居中，如果外层div不为table,则table-cell必须有高度;
• 在使用display:table-cell时，与float:left尽量不用同用;
• 不值得推荐的，因为会破坏整体的布局.

方法3.CSS3的弹性布局(flex)

上面总结过。比较推荐。