溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當中的小編將會給大家?guī)碛嘘P(guān)CSS設(shè)置垂直居中的方法，以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
一：css設(shè)置文本文字垂直居中
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中的文字水平垂直居中了
二：css如何設(shè)置div盒子容器（塊狀元素）垂直居中
1. 使用絕對定位和transform（未知元素高度）
如果我們不知道元素的高度，那么就需要先將元素定位到容器的中心位置，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合，從而實現(xiàn)垂直居中：
<!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偏移的百分比就是相對于元素自身的尺寸而言的。
2.使用絕對定位和負外邊距對塊級元素進行垂直居中 (已知元素的高度)
如果我們知道元素的高度，可以這樣來實現(xiàn)垂直居中：
<!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>效果圖：
這個方法兼容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現(xiàn)垂直居中。
3. 絕對定位結(jié)合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>效果圖：
這種方法需要先 把要垂直居中的元素相對于父元素絕對定位，top和bottom設(shè)為相等的值，不管設(shè)置成多少值，只要兩者相等就行；然后再將要居中元素的margin設(shè)為auto，這樣便可以實現(xiàn)垂直居中了。被居中元素的寬高也可以不設(shè)置，但不設(shè)置的話就必須是圖片這種自身就包含尺寸的元素，否則無法實現(xiàn)。
4. 使用padding實現(xiàn)子元素的垂直居中
<!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>效果圖：
這種實現(xiàn)方式非常簡單，就是給父元素設(shè)置相等的上下內(nèi)邊距，則子元素自然是垂直居中的，當然這時候父元素是不能設(shè)置高度的，要讓它自動被填充起來，除非設(shè)置了一個正好等于上內(nèi)邊距+子元素高度+下內(nèi)邊距的值，否則無法精確的垂直居中。這種方式看似沒有什么技術(shù)含量，但其實在某些場景下也是非常好用的。
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是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。元素可以通過設(shè)置display:flex;將其指定為flex布局的容器，指定好了容器之后再為其添加align-items屬性，該屬性定義項目在交叉軸（這里是縱向軸）上的對齊方式，可能的取值有五個，分別如下：
flex-start:：交叉軸的起點對齊；
flex-end：交叉軸的終點對齊；
center：交叉軸的中點對齊；
baseline：項目第一行文字的基線對齊；
stretch（該值是默認值）：如果項目沒有設(shè)置高度或者設(shè)為了auto，那么將占滿整個容器的高度。
上述就是小編為大家分享的CSS設(shè)置垂直居中的方法了，如果您也有類似的疑惑，不妨礙參照上述分析進行理解。如果想了解更多相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼