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;
}