H5元素的水平垂直居中布局总结

1，块级元素设置height和line-height或者text-align: center，可以让块级元素包裹的内联元素或者自身文本内容垂直居中或者水平居中；但是对包裹的块级元素和浮动元素不起作用。
2，块级元素包裹块级元素，设置被包裹元素margin: 0 auto达到水平居中，但是设置父元素的height和line-height或者子元素的vertical-align: middle不起作用，因为vertical-align: middle只对行内元素有效。总结设置子元素垂直居中有以下几种方法：
2.1，设置块级子元素display: inline-block

  



.btn-container {
  width: 100%;
  height: 40px;
  background-color: red;
  line-height : 40px;
  text-align: center;
  font-size: 0px;
}

.btn-content {
  display: inline-block;
  width: 100px;
  height: 30px;
  vertical-align: middle;
  background-color: green;
}

注意一定要设置父元素font-size: 0px。这是因为vertical-align: middle默认是和父元素的基线居中对齐，父元素的基线可以假想为字母x的底边，只有设置父元素font-size: 0px，才能将父元素的基线调整到中间，达到子元素在父元素中垂直居中的目的。
设置之前：

设置之后：

2.2，父块级元素包裹两个属性值为display: inline-block的子元素，并且有一个子元素的高度为100%，并且两个子元素都设置vertical-align: middle，达到另一个子元素垂直居中：

  客户端
  



.btn-container {
  width: 300px;
  height: 40px;
  background-color: red;
}

.btn-text {
   display: inline-block;
   height: 100%;
  vertical-align: middle;
  background-color: green;
}

.btn-content {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: yellow;
  vertical-align: middle;
}

渲染结果如下图所示：

注：该情况也适用于子元素为一张图片加一个块级元素的情况
2.3，设置父元素的padding-top为(父元素高度-子元素高度)/2

.btn-container {
  width: 300px;
  height: 40px;
  background-color: red;
  padding-top: 5px;
}

.btn-content {
   width: 100px;
  height: 30px;
  background-color: green;
}

那是否可以设置子元素的margin-top来达到同样的效果呢，也可以，但是有风险。根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。说白点就是，父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层向上找，把自己的margin当父元素的margin执行。

2.4，设置子元素为绝对定位，有以下3种方法可以实现水平和垂直居中：

.btn-container {
  position: relative;
  width: 300px;
  height: 40px;
  background-color: red;
}
//第一种方法
.btn-content {
   position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;
  width: 100px;
  height: 30px;
  background-color: green;
}
//第二种方法
.btn-content {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -15px;
  margin-left: -50px;
  width: 100px;
  height: 30px;
  background-color: green;
}
//第三种方法
.btn-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 30px;
  background-color: green;
}

第二种方法必须知道子元素宽度和高度；如果不设置子元素尺寸，第一种方法子元素尺寸会和父元素一致，第三种方法会和子元素中包裹的内容一致；
2.5，使用flex弹性布局，弹性容器的每个子元素都变成一个弹性元素，而且是以相同方式布局的。不管是段落还是span元素，都变成弹性元素。
以2.2节为例:

.btn-container {
  width: 300px;
  height: 40px;
  background-color: red;
  display: flex;
  align-items: center;
}

.btn-text {
  height: 100%;
  background-color: green;
}

.btn-content {
  width: 100px;
  height: 30px;
  background-color: yellow;
}

可以看到弹性布局简单很多，所以h5布局中能用弹性布局的地方我们都应该尽量用弹性布局，在界面适配方面弹性布局也有一定的优势。