水平方向上

針對inline, 內聯塊inline-block, 內聯表inline-table, inline-flex元素及img,span,button等元素
.text_div{
	text-align:center;
}
複製程式碼

不定寬塊狀元素居中
.text_div{
    margin:0 auto;//且需要設定父級寬度
}

複製程式碼

通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    left:-50%;
}
複製程式碼
 

垂直居中

單行內聯(inline-)元素垂直居中 
通過設定內聯元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。

.text_div{
    height: 120px;
    line-height: 120px;
}
複製程式碼

利用表佈局
.father {
    display: table;
}
.children {
    display: table-cell;
    vertical-align: middle;
     text-align: center; 
}
複製程式碼

flex佈局
.center-flex {
    display: flex;
    flex-direction: column;//上下排列
    justify-content: center;
}
複製程式碼
 

絕對佈局方式
已知高度
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}
未知高度
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
複製程式碼

垂直水平居中根據上方結合

flex方式
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
grid方式
.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}