# 水平垂直居中

```
水平垂直居中是最常用到的布局,那么常用的解决方案都有哪些呢，下面就依次来列举一下
```

例子：

HTML代码：

```
<div class="container">
    <div class="inner">内容</div>
</div>
```

## 常用解决方案类别：

### 一.脱离文档流方式的居中

1. 负margin的方式(inner宽高知道)

```
.container{
    position: relative;
}
.inner{
    width:100px;
    height:30px;
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-15px;
    margin-left:-50px;
}
```

2.transform:translate的方式

```
.inner{
    width:100px;
    height:30px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
```

3.margin:auto的方式

4.css3的 calc属性方式（**固定高度**）

```
<div class="container">Hello World！</div>

.container {
    position: absolute;
    width: 300px;
    height: 300px;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    border: 1px solid red;
}
```

### 二.未脱离文档流方式的居中

1.line-height方式实现(**固定高度**)

```
<div class="container">Hello World！</div>

.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}
```

2.flex布局

```
.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}
```

```
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
```

3.table方式

```
.container {
    display: table;         /* 让div以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}
```