CSS怎麼設定垂直居中？
- 青灯夜游原創
- 2018-09-08 13:42:5431370瀏覽
在我們開發前端頁面的時候，為了讓頁面效果美觀，會出現需要垂直居中效果的地方。本章就讓我們來了解一下用css如何設定垂直居中，詳細介紹一下設定文字與div盒子的垂直居中的幾種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
推薦手冊：CSS線上手冊
#一：css如何設置文字文字垂直居中
1、line-height 使文字垂直居中
##
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>
效果圖：
這樣就能讓div中的文字水平垂直居中了
#2、CSS3的flex佈局 讓文字垂直居中
#
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
/*设置为伸缩容器*/
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>效果圖：
1.Div垂直居中效果怎麼實現
2.div標籤：水平居中與垂直置中的實作（附程式碼）
相關影片推薦：
1.CSS影片教學-玉女心經版
二：css如何設定div盒子容器（塊狀元素）垂直居中
1.使用絕對定位和負外邊距對塊級元素進行垂直居中(已知元素的高度)
如果我們知道元素的高度，可以這樣來實作垂直居中：
##<!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>效果圖：
#這個方法相容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。 
2. 使用絕對定位和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偏移的百分比就是相對於元素本身的尺寸而言的。 
3. 絕對定位結合 margin: auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 200px;
height: 100px;
background: orange;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中...</div>
</div>
</body>
</html> 效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
background: #ddd;
padding: 100px 0;
}
.child{
width: 200px;
height: 100px;
background: orange;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中了</div>
</div>
</body>
</html>效果圖：
这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。
5. 使用flex布局
<!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>效果图：
关于flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下：
flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
flex-start:：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：交叉轴的中点对齐；
baseline：项目第一行文字的基线对齐；
stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。
以上是CSS怎麼設定垂直居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！