# 垂直居中
以下面例子为例说明，讲一个div居于页面中间
```markup
```
```markup
```
## **情况一**：在明确知道父元素与子元素的height属性值
```css
.container {
height: 500px;
}
.content {
width: 400px;
height: 200px;
}
```
### 方法1： 父相对定位 + 子绝对定位 + 子 top margin-top定位
父元素使用相对定位，子元素使用绝对定位，使用top或者margin等改变位置的属性，设置为父元素高度的一半减去子元素高度的一半
```css
.content {
/*方法一*/
position: absolute;
/*top: 150px;*/
/*margin-top: 150px;*/
}
```
### 方法2： flex
```css
/*方法二： flex*/
.container{
display: flex;
}
.content{
// 在交叉轴场排列方式
align-self:center;
}
```
## **情况二**：元素高度未知的情况
### 方法2： flex
**flex几乎是万能的**。继续使用flex，flex布局是CSS3中很有用的发明，尤其在局中的问题上，设置普通的样式不好解决的情况下，使用flex布局很容易解决，在以后使用的过程中，有限使用flex布局
```css
/*方法二： flex*/
.container{
display: flex;
}
.content{
align-self:center;
}
```
### **方法3**：使用JS获取相关高度，再添加定位样式
```markup
```
### **方法4**：`transform: translate(-50%,-50%)` + `top,left: 50%`
注意： translate(x,y) 括号里填百分比数据的话，会以本身的长宽做参考，所以先将元素顶部通过定位移动到页面50%位置(`top: 50%`)，然后再对元素自身translate变换，移动自身50%。
* `translate`的参数是以元素自身宽高为参考的，因此需要先设置元素`top: 50%`，在设置top的时候，元素是绝对定位或者相对定位的，再使用`translate`将元素向上移动自身高度的50%。
* `transform`的使用对象是块级元素以及某些内联元素
```css
.content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
```
### 方法5 ：vertical-align
使用`vertical-align`定义**行内元素**的基线相对于该元素所在行的基线的垂直对齐，这里有个很关键的概念叫做 `line-box`，此方法只针对于内嵌或者行内元素。使元素变为内联元素方法有两种，一种`display: inline-block`， 另一种是`display: table-cell`， 不同的display，`vertical-align: middle`作用对象不一样
#### 方法 5.1 ：vertical-align + inline-block
* 给父类添加after伪元素并`vertical-align: middle`,或者在最后添加一个空白子元素并`vertical-align: middle`，目的是为了将line-box线居中
```markup
Title