水平垂直居中.md

# absolute + 负margin
```html


```
优点：
* 兼容性好
* 易于理解
缺点：
* 需要知道子元素的宽高
# absolute + auto margin
```html


```
优点：
* 易于理解
* 兼容性好
缺点：
* 需要知道子元素的宽高
# absolute + calc
```css
.outer {
position: relative;
width: 300px;
height: 300px;
background: red;
}
.inner {
position: absolute;
width: 200px;
height: 200px;
background: yellow;
left: calc(50% - 100px);
right: calc(50% - 100px);
}
```
优点：
* 易于理解
缺点：
* 兼容性依赖于 calc，只支持 IE9及以上
* 需要知道子元素宽高
# absolute + transform
```css
.outer {
position: relative;
width: 300px;
height: 300px;
background: red;
}
.inner {
position: absolute;
width: 200px;
height: 200px;
background: yellow;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
```
优点：
* 易于理解
* 实现简单
* 无需知道子元素宽高
缺点：
* 兼容性依赖于 transform，只支持 IE9 及以上
# table
```css
.outer {
width: 300px;
height: 300px;
background: red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.inner {
display: inline-block;
width: 200px;
height: 200px;
background: yellow;
}
```
优点：
* 兼容性好
* 易于实现
* 不需要知道子元素宽高
* 可读性强
# flex
```css
.outer {
display: flex;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
background: red;
}
.inner {
width: 100px;
height: 100px;
background: yellow;
}
```
优点：
* 实现简单
缺点：
* 兼容性依赖于 flex
# grid
```css
// 父元素指定子元素对齐方式
.outer {
display: grid;
align-content: center;
justify-content: center;
width: 300px;
height: 300px;
background: red;
}
.inner {
width: 200px;
height: 200px;
background: yellow;
}
// 子元素自己指定对齐方式
.outer {
display: grid;
width: 300px;
height: 300px;
background: red;
}
.inner {
width: 200px;
height: 200px;
align-self: center;
justify-self: center;
background: yellow;
}
```
优点：
* 实现简单
缺点：
* 兼容性依赖于 grid