1. 設置父元素height和line-height屬性值相等
* 缺點：僅適用于寬度固定的單行文本
2. 設置元素絕對定位（position:absolute），并設置top:50%；margin-height為負的height的一半
* 缺點：元素高度固定
```
.container{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.content{
background-color: #ccc;
height: 50px;
width: 100%;
position: absolute;
top: 50%;
margin-top: -25px;
}
<div class="container">
<div class="content"></div>
</div>
```
3. 設置元素絕對定位（position:absolute），并設置top:50%；transform:translateY(-50%)；
* 缺點：transform屬性瀏覽器兼容性不好
4. 設置元素vertical-align:middle；并添加父元素:after偽元素，設置vertical-align:middle
* 缺點：僅適用于行內元素、行內塊元素
```
.wrapper {
width: 500px;
height: 500px;
background-color: #ccc;
text-align: center;
}
.wrapper:after {
content: '';
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.align {
background-color: #f00;
width: 20%;
height: 20%;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="align"></div>
</div>
```
5. 設置父元素display:flex;justify-content:center;
* 缺點：flex布局瀏覽器兼容性不好
6. 設置元素絕對定位(position:absolute)，并設置top:0;bottom:0;margin:auto;
```
.wrapper {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
}
.content{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid green;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
<div class="wrapper">
<div class="content"></div>
</div>
```
