css垂直居中的6种常用方式总结

注：以下demo都只是针对现代浏览器所做，未兼容低版本的IE以及其他非主流浏览器。

1.单行文本垂直水平居中<兼容所有浏览器>

  HTML

<div class="button">
   确定  
</div>

 CSS

.button{ height: 50px; line-height: 50px }

补充：line-height的值不能设为100%；官网文档中给出的关于line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距，所以大家就明白了，如果是百分比是相对于字体尺寸来讲的。

 

2.flex布局<flex兼容性，点击查阅>

 HTML

<div class="wrapper">
    <div class="content">世界那么大，我想去看看~</div>
</div>

 

CSS

.wrapper{
     display: flex;
     align-items: center;
     width: 300px; 
     height: 300px; 
     background-color: #ddd;}
/*
设置元素垂直、水平居中
.wrapper{display: flex; align-items: center; justify-content: center; background-color: #ddd; width: 300px; height: 300px; }
*/

.content{ background-color: red;}

补充：适用于被设置垂直/水平居中元素宽度和高度未知的情况

 

3.绝对定位 + transform<浏览器兼容性：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+>

  HTML

<div class="wrapper">
   <div class="content">
        为中华之崛起而读书！
   </div>
</div>

  CSS

.wrapper{ width: 800px; height: 500px; position: relative; }

/* 元素垂直、水平居中 */
.content{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, 50%);
}

/*
元素水平居中
.content{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

元素垂直居中
.content{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}
*/

 

补充：该方法不仅可设置元素垂直居中，还可设置元素的水平居中，主要适用于欲设置垂直/水平居中的元素，其宽度、高度未知的情况

 

4.绝对定位 + margin: auto; <兼容所有浏览器>

HTML

<div class="wrapper">
    <div class="content">世界那么大，我想去看看~</div>
 </div>

CSS

.wrapper{width: 300px; height: 300px; position: relative;}
.content{ 
      position: absolute; 
      top: 0; 
      bottom: 0;
      margin: auto; 
      width: 100px;
      height: 80px;
}

/*
设置元素垂直、水平居中
.content{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 80px;}
*/

补充：适用于被设置垂直居中元素具有高度的情况

 

5.绝对定位 + 设置负margin值<兼容所有浏览器>

HTML

<div class="wrapper">
    <div class="content">世界那么大，我想去看看~</div>
</div>

CSS

.wrapper{position: relative; width: 300px; height: 300px;}
.content{position: absolute; top: 50%; left: 50%; margin-top: -40px; width: 100px; height: 80px; }

/*
设置元素垂直、水平居中
.content{position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -50px; width: 100px; height: 80px;}
*/

补充：适用于被设置垂直居中元素具有高度的情况

 

 

6. 父元素：display: table;   

    子元素： display: table-cell + vertical-align: middle;

HTML

<div class="wrapper">
    <div class="content">世界那么大，我想去看看~</div>
 </div>

 

 CSS

.wrapper{display: table; width: 300px; height: 300px; }
 .content{
     display: table-cell;
     vertical-align: middle;
}

关于vertical-align啰嗦两句：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>这样的元素是不行的。

　　valign属性规定单元格中内容的垂直排列方式，语法：<td valign="value">，value的可能取值有四种：

　　top：对内容进行上对齐

　　middle：对内容进行居中对齐

　　bottom：对内容进行下对齐

　　baseline：基线对齐

        关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。