1. 水平居中
   
   • 行內元素居中：
     可以給它的父級元素指定：text-align：center，這樣該子元素就會在水平方向上居中了。需要注意的是，會受該屬性影響的只有inline／inline-block／inline-flex等擁有行內元素那樣特性的元素。
   • 塊級元素居中：
     對於一個有固定寬度的塊級元素，可以通過設定margin：0 auto；這樣來實現,注意，這裡的塊級元素要有固定的寬度。
   • 使用定位來居中：
     假如待定位的元素有固定的寬度，設定父元素的position：relative，然後要定位的元素position：absolute ，如下

<style>
 .wrapper
 
{
  position:relative;

}
.box{
 position:absolute;
 width:100px;
 left:50%;
 margin-left:-50px;
}
</style>
      <div class="wrapper">
        <div class="box">
        </div>
      </div>

這裡margin-left的值的絕對值大小等於寬度的一半。注意，元素的寬度是必須的。

這裡還有一種其他方式：

<style>
 .wrapper{
  position
 
:relative;
}
.box{
 position:absolute;
 width:100px;
 left:0;
 right:0;
 margin:0 auto;
}
</style>
      <div class="wrapper">
        <div class="box">
        </div>
      </div>

• 使用transform：
  也是利用了定位，跟上述有點類似，不同的是元素可以不設定寬度

     <style>
     .wrapper {
   position:relative
 
;
               }
.center {
    position:absolute;
    background-color: red;
    transform: translateX(-50%);
    color:#000;
    left:50%;
}
     </style>
     <div class="wrapper">
        <div class="center">
          kasol
        </div>

    </div>

• 使用flex彈性佈局：
  給父元素設定display：flex，justify-content：center，這個是利用了彈性佈局，justify-content指定了一個Item在主軸方向上的對齊方式.

.wrapper{
  display:flex;
  border:1px solid red;
  justify-content:center;
}
p{
  border:1px solid #ccc;
  width:50px;
}

2.垂直居中

• 單行文字垂直居中

  • 把line-height設定成和父元素高度相同的值。

• 假如待定位的元素有固定的高度，如下：

    <style>
    .wrapper{
  border:1px solid red;
  height:300px;
  position:relative;
}
p{
  border:1px solid #ccc;
  margin:0;
  height:100px;
  position:absolute;
  top:50%;
  margin-top:-50px;

}
</style>

  <div class="wrapper">
    <p>123</p>
  </div>

其實和水平居中套路是差不多的。那麼相似的也可以這樣。

.wrapper{
  border:1px solid red;
  height:300px;
  position:relative;
}
p{
  border:1px solid #ccc;
  margin: auto 0;
  height:100px;
  position:absolute;
  top:0;
  bottom:0;

}

也是利用了margin這個屬性，當然也可以用transform：

.wrapper{
  border:1px solid red;
  height:300px;
  position:relative;
}
p{
  border:1px solid #ccc;
  height:100px;
  position:absolute;
  margin:0;
  transform:translateY(-50%);
  top:50%;

}

也可以用彈性佈局：

.wrapper{
  display:flex;
  border:1px solid red;
  height:300px;
  align-items : center;
}
p{
  border:1px solid #ccc;
  height:50px;

}

垂直居中還可以利用table來

.wrapper{
  display: table;
  border:1px solid red;
  height:500px;
  width:300px;
}
p{
  display: table-cell;
  vertical-align:middle;
}

主要是利用了table-cell可以設定vertical-align屬性

想要垂直水平居中的話，把上面的結合起來分析就行了

總之針對不同的情況可以選擇不同的方法，