总结的一些元素居中的方法

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(不定高，不定宽)，兼容性相对比较差；