# 前言

元素的水平及垂直居中是在写CSS样式中最常遇到的问题之一。相信会CSS的同学肯定都有自己的解决方法，但是并不一定都能熟练运用，并且知道其中原理。下面，我就将自己总结的实现方法分享给大家。 ps：重点是第四，疑惑在第三，第一、第二也较常用

为本文制作的demo：元素居中显示

# 一、单行文本

这里的单行文本不仅是指单行显示的文本以及行内元素（设置了display: inline;的也是行内元素），当然这些元素也只有包含文本才有意义，才能显示出来。

/* 父元素*/
div {
  text-align: center;//水平居中
  light-height: heightValue;//垂直居中
}

注意：

• 这里的heightValue指的是height属性值，即行高值 = 高度值，才能实现垂直居中。
• 另外一种常见的就是不设置高度，直接用行高来撑起高度，这样就不存在行高与高度一致的问题。

具体原因请参考文章：对文字和行高的理解

# 二、多行文本

这里的多行文本，实际上应该说是不定行，这个方法能自适应的居中。

/* 父元素*/
div {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

这里设置table-cell，创建类似表格单元的元素，就可以使用vertical-align设置垂直对齐方式。

注意：在一些文章中，我看到还需要设置其子元素的vertical-align，但是在实践中发现并不需要。与下面使用table-cell的方法有所区别

# 三、图片

这里图片泛指行内块元素

• # table-cell + vertical-align

/* 父元素*/
div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
/* 子元素img*/
img{
  vertical-align:middle;
}

• 这个方法与上面的有区分，子元素必须加上vertical-align，否则不同大小的图片显示效果不一样
• 不支持img的父元素浮动，因为这样display会自动变为block，所以当多图片显示时需要再在外面嵌套一层标签，不方便

注意：在一些文章中，在父元素上还添加了font-size的大小控制，在我的实践中，不添加font-size可以实现效果。但是，当font-size达到一定程度的时候，会有影响。

• # vertical-align + font-size

/* 父元素*/
div {
font-size:128px; 
vertical-align: middle;
}
/* 子元素img*/
img{
  vertical-align: middle;
}

font-size达到一定大小就会影响行内元素的垂直位置，具体是什么原因不明确，但是感觉是跟vertical-align以及行高有关。

注意：这个方法的原本是在父元素上加display: inline-block;的，实践发现并不需要，只要里面的是行内块元素就可以了。使用这个方法特别注意的是父元素font-size与子元素height的比例关系，因为不可控，所以不推荐使用。

• # 其他方法参照下面的块元素实现

# 四、盒子

盒子主要指块元素和行内块，下面分享的是布局中主要用到的。margin: 0 auto就不做介绍了。

# 1. position + 负margin

/* 父元素 */
.demo{
  position: relative;
}
/* 子元素 */
.box{
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* img高度的一半*/
  margin-left: -50px;/* img宽度的一半*/
}

利用position移动父元素宽高的一半，再利用负margin往回移动子元素宽高的一半，刚好居中对齐。适合固定宽高的元素。

# 2.position + translate

/* 父元素 */
.demo{
  position: relative;
}
/* 子元素 */
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate3d(-50%,-50%,0);
}

同上理，这里利用translate3d往回移动。子元素不固定宽高也适用。

# 3. table-cell + vertical-align

这就是前面图片提到的方法，只不过要设置子元素为display: inline-block;

# 4. flex

这才是真正的布局神器。适用于所有，但也需要灵活应用。

.demo {
  display: flex;
  align-items: center;
  justify-content: center;
}

简洁、高效，在低版本IE存在兼容问题，但是现在几乎不用考虑了。

详细语法请查看我的博文：关于Flex布局