總結的一些元素居中的方法

1.定長定寬

1.1絕對定位和負magin值

HTML:
<div class="father-box">
  <div class="children-box"></div>
</div>
CSS:
.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    
 }
 .children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: pink;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px; 
 }

1.2 絕對定位 + transform

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    width: 100px;
    height: 100px;
    background: pink;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

1.3 絕對定位 + left/right/bottom/top + margin

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    height: 100px;
    width: 100px;
    position: absolute;
    display: inline;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background: pink;
    margin: auto;
}

1.4 flex佈局

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    height: 100px;
    width: 100px;
    background: pink;
}

1.5 grid佈局

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    width: 100px;
    height: 100px;
    background: pink;
    margin: auto;
}

1.6 table-cell + vertical-align + inline-block/margin: auto

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.children-box {
    width: 100px;
    height: 100px;
    background: pink;
    margin: auto;// 可以換成  display: inline-block;
}

2.不定寬高

2.1 絕對定位 + transform

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
   position: absolute;
   background: pink;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

2.2 table-cell

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.children-box {
   background: yellow;
   display: inline-block;
}

2.3 flex佈局

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    background: pink;
}

2.4 flex變異佈局

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
}
.children-box {
    background: pink;
    margin: auto;
}

2.5 grid + flex佈局

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: pink;
    align-self: center;
    justify-self: center;
}

2.6 gird + margin佈局

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: pink;
    margin: auto;
}

2.7 writing-mode屬性佈局

HTML:
  <div class="father-box">
    <div class="children-box">
      <p>11111</p>
    </div>
  </div>


CSS:
.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    writing-mode: vertical-lr;
    text-align: center;
}
.father-box>.children-box {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.father-box>.children-box>p {
    display: inline-block;
    margin: auto;
    text-align: left;
    background: yellow;
}

3. 圖片定高|不定高水平垂直居中

3.1 table-cell

HTML:
<div class="father-box">
  <img src="URL">
</div>

CSS:
.father-box {
    height: 200px;
    width: 200px;
    display: table-cell;
    text-align: center;
    border: 1px solid red;
    vertical-align: middle;
}

3.2 ::after

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    text-align: center;
}
.father-box::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
img {
    vertical-align: middle;
}

3.3 ::before

.father-box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    text-align: center;
    font-size: 0;
}
.father-box::before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%;
}
img {
    vertical-align: middle;
}

display: flex存在接容性問題,使用的時候需要根據實際情況做出處理

<!--
 * IE10部分支持2012，需要-ms-前綴
 * Android4.1/4.2-4.3部分支持2009 ，需要-webkit-前綴
 * Safari7/7.1/8部分支持2012， 需要-webkit-前綴
 *  IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前綴
 -->
   
.cc {
	display: -ms-flex;
  	display: -webkit-flex;
  	display: flex;      
}

4. 元素居中歸納

4.1 內聯元素居中佈局
1: 水平居中

• 行內元素可設置：text-align: center;
• flex佈局設置父元素：display: flex; justify-content: center;

2: 垂直居中

• 單行文本父元素確認高度：height === line-height
• 多行文本父元素確認高度：disaply: table-cell;vertical-align: middle;

4.2 塊級元素居中佈局
1:水平居中

• 定寬: margin: 0 auto;
• 不定寬： 請參考上文。

2:垂直居中

• position: absolute設置left、top、margin-left、margin-to(定高)；
• position: fixed設置margin: auto(定高)；
• display: table-cell；
• transform: translate(x, y)；
• flex(不定高，不定寬)；
• grid(不定高，不定寬)，兼容性相對比較差；