CSS水平居中和垂直居中的方法

本篇文章主要介紹本人最近在CSS學習中整理總結出的水平&垂直居中的幾種方法

水平居中

子元素為行內元素、單個塊狀及多個塊狀元素佈局方案不同

1. 行內元素：對父元素設定text-align: center；
2. 塊狀元素：子元素設定margin: 0 auto;
3. 多個塊狀元素：有三種方式
   a. 子元素全部設定為display: inline-block;,父元素設定text-align: center；
   b. flex佈局，父元素display: flex; justify-content: center;
   c. 如果是在多行各自居中，直接給子元素設定margin: 0 auto;

垂直居中

子元素為單行內聯、多行內聯文字及塊狀元素佈局方案不同

1. 單行內聯文字：父元素高度一定，設定line-height等於height，
   父元素高度不定，子元素設定上下```padding``
2. 多行內聯文字：父元素設定display: table-cell; vertical-align: middle;
3. 塊狀元素：有五種方式
   a. 使用position:absolute,設定left、top、margin-left、margin-top的屬性

.box{
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}

b. 使用position:absolute,設定top::0;bottom:0;margin:auto;

c. 使用CSS3的transform屬性

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

d. 使用before，after偽元素

.box:before{
    content:'';
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.content{
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  vertical-align: middle;
}

e. 使用flex佈局，父元素display: flex; align-items: center;