CSS 居中方法总结

文字水平和垂直居中

     <div class="textAlignCenter">
        <span>居中</span>
      </div>
     .textAlignCenter{
          text-align: center;
        }

使用text-align可以实现块级元素内文本和图片水平居中,对于文字来说，可以设置line-height 来实现单行文字的垂直居中，但是对于多行文字来说，效果不好。所以可以通过table布局来实现多行文字垂直居中。

     <div class="textAlignCenter">
        <span>居中</span>
      </div>
     .textAlignCenter{
          text-align: center;
          display:table;
       }
      span{
        display:table-cell;
        vertical-align: middle;
      }

实现图片的水平垂直居中

1.通过vertical-align:middle实现垂直居中

  .textAlignCenter{
    width: 400px;
    height: 300px;
    text-align: center; //文字和图片的水平居中
    display: table-cell; //主要是这个元素和vertical-align 属性实现水平居中
    vertical-align: middle;
  }
  img{
    width:100px;
    height:100px;  
  }
    <div class="textAlignCenter">
        <img src="./img/1.pic.jpg"></img>
  </div>
  

1. 采用背景法

<div class="img_bg"></div>
.img_bg{
    width: 400px;
    height: 300px;
    background: url(img.jpg) no-repeat center center;
}

水平且垂直居中

1. 宽高固定的元素的水平垂直居中
   设定父级容器为相对定位的容器，设定子元素绝对定位的位置为顶部和左部50%，最后使用负向 margin 实现水平和垂直居中，margin 的值为宽高的一半。

.parent { position: relative; }
 .child { 
    width: 100px;
    height: 50px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -50px 0 0 -25px;
}

1. 宽高不固定元素水平垂直居中

如果无法获取确定的宽高，同样需要设定父级容器为相对定位的容器，但是需要使用 CSS3 属性 transform: translate(-50%, -50%) 实现水平垂直居中，但是该属性有兼容性问题，如下：
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

.parent { position: relative; }
 .child { 
   position: absolute; 
   top: 50%; 
   left: 50%; 
    transform: translate(-50%, -50%); 
  }

如果不考虑浏览器兼容性问题，可以考虑使用flex属性，
使用 flexbox 实现水平和垂直居中，只需使用两条居中属性即可：

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