水平居中

行內元素：在其父元素上設置text-align：center

. container {
    text-align: center;
}

注：此種方式.container要設置寬度才有效果

塊級元素：給其設置寬度，左右margin： auto

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

水平居中還可以使用絕對定位和flex布局的方式，具體見下面垂直居中的絕對定位和flex布局方式

垂直居中

行內元素：
1.將高度和line-height設置相同

box {
    height:30px; 
    line-height:30px;
}

2.設置上下padding相同

.box  {
    padding: 10px 0;
}

3.vertical-align實現(xiàn)定位,此種方法的原理是在容器上設置一條垂直的充滿整個高度的，沒有寬度的inline-block的線條，給這個線條設置個vertical-align，在給需要垂直居中的行內元素設置vertical-align以便和前面的線條居中對齊

.box::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.box img{
  vertical-align: middle;
  background: blue;
}

塊級元素：
1.絕對定位實現(xiàn)居中,給需要相對的父級以上的容器設置position：relative

.box {
    width: 400px;
    height: 300px;
    position: absoulue;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2.使用display: table-cell讓標簽元素以表格單元格的形式呈現(xiàn)，類似于td標簽。然后使用vertical-align： middle實現(xiàn)居中
注:這方式如果不給容器設置寬度，容器寬度會收縮至內容的大小

.box {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
}

3.display: flex實現(xiàn)居中
①通用方法：align-items: center;設置垂直居中；justify-content: center;實現(xiàn)水平居中。

<div class="space">
  <div class="earth"></div>
</div>

.space {
  width: 100vw;
  height: 100vh;  /* 設置寬高以顯示居中效果 */
  display: flex;  /* 彈性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */    
}
.earth::after {
  content: '??';
  font-size: 85px;
}

②對于flex布局中的塊級元素可以單獨設置margin:auto;垂直水平居中（margin:auto 0;垂直居中。margin:0 auto;水平居中）

<div class="space">
  <div class="earth"></div>
</div>

.space {
  width: 100vw;
  height: 100vh;  /* 設置寬高以顯示居中效果 */
  display: flex;  /* 彈性布局 */  
}
.earth {
  width:50px;
  height:50px;
  border-radius:50px;
  background:#00ffff;
  margin:auto;
}