css居中問題

一、水平居中

1.一、行內元素直接水平居中（text-align）

text-align:center;

只要父元素設置該屬性值，全部的行內子元素都會水平居中。且該屬性有繼承性

 

二、肯定寬度的塊級元素實現水平居中

2.一、自動邊距實現水平居中（margin）

margin: 0 auto;

具備寬度的塊級元素設置上面屬性後就會在父元素中左右居中

 

2.二、絕對定位和負邊距實現水平居中（absolute+margin）

.parent {
  position: relative;
}

.children {
  width: 150px;
  height: 150px;
  background: #d780c9;
  position: absolute;
  left: 50%;
  margin-left: -75px;
}

將父元素定位爲 relative，子元素定位爲 absolute，子元素就會相對於父元素進行定位，left 設爲50%，margin-left 爲寬度的一半，由此實現了左右居中。

 

2.三、絕對定位和0實現居中（absolute+left+right+top+bottom）

該方法可實現垂直水平居中

.parent {
　 display: relative;
}
.children {
  width: 150px;
  height: 150px;
  background: #d780c9;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

將子元素設爲 position: absolute + （left=0+top=0+right=0+bottom=0）+ margin: auto，將父元素定位爲 relative，由此子元素將會在父元素中垂直水平居中。若是父元素沒有相對定位，則該元素相對於整個窗口垂直水平居中。

三、不肯定寬度的元素實現水平居中

3.一、絕對定位和transform實現水平居中（absolute+transform）

.children {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

 

3.二、flex 佈局實現水平居中

.parent{
  display: flex;
  justify-content: center;
}

 

3.三、table 加自動 margin 實現左右居中（table+margin）

.children {
  display: table;
  margin: 0 auto;
}

在某一元素中設置display爲table，左右外邊距自動，由此可實如今父元素中左右居中。

 

3.四、設爲行內元素實現水平居中（inline-block+text-align）

.parent {
  text-align: center;
}
.children {
  display: inline-block;
  /*或者： display: inline; */
}

子元素設爲行內元素，父元素經過屬性 text-align 設置行內元素居中。

 

四、垂直居中

4.一、flex實現垂直居中

.parent{
  display: flex;
  align-items: center;
}

 

4.二、絕對定位和負邊距（absolute+margin）

.parent {
  position: relative;
}
.children {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  margin-top: -75px;
}

 

4.三、table-cell實現垂直居中（table-cell+vertical-align）

.parent{
  display: table-cell;
  vertical-align: middle;
}

由此父元素中的子元素所有都實現了垂直居中

 

4.四、絕對定位和0

參考上面的2.3

4.五、絕對定位和transform

參考上面的3.1

詳細參考：https://blog.csdn.net/dengdongxia/article/details/80297116