css實現垂直居中的方法：1、使用“line-height”屬性使文字垂直居中，只需要在css中添加“line-height:300px;”樣式來實現，其中300px表示寬度和行高相同。2、使用絕對定位“position: relative;”和負外邊距“margin: -50px 0 0 0;”對塊級元素進行垂直居中；3、使用絕對定位屬性和“transform”的“translate”屬性將元素的中心和父容器的中心重合實現垂直居中；4、使用flex布局（彈性布局）實現垂直居中即可。
具體內容如下：
1、line-height 使文字垂直居中
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #21B4BB;
color: #FFF;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>
效果圖：
這樣就能讓div中的文字水平垂直居中了
2、使用絕對定位和負外邊距對塊級元素進行垂直居中 (已知元素的高度)
如果我們知道元素的高度，可以這樣來實現垂直居中：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中</div>
</div>
</body>
</html>
效果圖：
這個方法兼容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。
3、使用絕對定位和transform進行垂直居中（未知元素高度
如果我們不知道元素的高度，那么就需要先將元素定位到容器的中心位置，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實現垂直居中：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div>
</div>
</body>
</html>
效果圖：
這種方法有一個非常明顯的好處就是不必提前知道被居中元素的尺寸了，因為transform中translate偏移的百分比就是相對于元素自身的尺寸而言的。
4. 使用flex布局
1）、使文字垂直居中
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: #21B4BB;
color: #FFF;
/*設置為伸縮容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*舊版本*/
-moz-box-align: center;/*舊版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（彈性布局）</div>
</body>
</html>
效果圖：
2）、使塊級元素（div）垂直居中
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
.child{
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中了--彈性布局</div>
</div>
</body>
</html>
效果圖：
