元素水平居中和垂直居中的方式
關於居中的問題,一直處於疑惑不解的狀態,知道的幾種方法好像也不是每一次都會起到作用,所以更加迷惑。主要是不清楚該
在什麼情況下采用哪種解決方法,所以,整理了一些方法,梳理一下思路,做一個總結。
1. line-height使單行文字垂直居中
對於單行文字,可以設定它的行高等於它父容器的高度,這樣就實現了該文字的垂直居中,但是此方法只適用於單行文字。
(其實嚴格意義上來說,文字並不是絕對的垂直居中的,有那麼很小的幾畫素差距,只是我們看上去它是居中的;這裡的原因,就是文字的基線對齊的因素了,感興趣的朋友可以再深入地去了解一下,這裡我就不展開了)平時這樣用就可以了。
對於多行文字,設定line-height就無法實現了,在這裡有一個方法比較好。
還記得剛學習html的時候,大家應該都記得表格table吧,在每一個單元格里,如果我們想要讓裡邊的文字垂直居中的話,用到的屬性是 vertical-align:middle;所以在多行文字的情況下,就可以用的這個屬性。
前提條件是,我們需要給文字再加一層標籤,這裡在 box3 中,我用 span 標籤把文字包了起來。
給 span 的父級元素 div.box3 設定 display:table;給 span 設定display:table-cell;vertical-align:middle; 就可以了。
這裡我沒有考慮IE低版本相容性問題,可以參考下方的推薦閱讀,做進一步瞭解。
示例程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
div{
margin: 50px auto;
width: 600px;
height : 100px;
line-height: 100px;
font-size: 20px;
font-weight: bold;
color: #ff1493;
background-color: #fff;
box-shadow: 0 0 5px #000;
border-radius: 10px;
}
.box2{
color: #800000;
}
.box3{
display: table;
margin-top: 200px;
}
.box3 span{
display: table-cell;
vertical-align: middle;
line-height: 20px;
}
</style>
</head>
<body>
<div class="box1">
這段文字想要居中!這段文字想要居中!這段文字想要居中!
</div>
<div class="box2">
我們也想要居中!<br>
我們也想要居中!<br>
我們也想要居中!
</div>
<div class="box3">
<span>
我們也想要居中!<br>
我們也想要居中!<br>
我們也想要居中!
</span>
</div>
</body>
</html>
效果如下:
推薦閱讀:
2. text-align 水平居中
該屬性只能對圖片、文字等行內元素(display為inline 或 inline-block 等)進行水平居中。
3. margin設定auto
- 水平方向上:
無論是塊狀元素還是行內元素,都可以通過設定 margin 的 left 和 right 為 auto,來達到水平居中的效果,此方法只能進行水平的居中,且對浮動元素或絕對定位元素無效。常用的地方,在做居中佈局的時候,對於一個div設定 margin:0
auto;
來實現水平居中。
- 水平垂直方向:
對於一個塊級元素,對它做絕對定位,然後設定它的 left right top bottom 都是0, margin 是 auto, 來實現水平垂直都居中,對於行內元素,無法設定,因為margin-top 和 margin-bottom 對於行內元素不起作用;
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.parent{
position: absolute; /* 父級元素設定相對定位 */
margin-left: 100px;
margin-top: 100px;
width: 600px;
height: 400px;
border: 1px solid #ddd;
border-radius: 15px;
background-color: #fff;
box-shadow: 0 3px 18px rgba(0,0,0,.5);
}
.child{
position: absolute; /* 子級元素設定絕對定位 */
width: 100px;
height: 100px;
background-color: #3eb777;
border-radius: 15px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin:auto; /* 這個屬性設定是必須的 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
效果如下:
那麼,它是如何自適應的呢?
原因要考慮到絕對定位,因為絕對定位的佈局取決於三個因素,一個是元素的位置,一個是元素的尺寸,一個是元素的 margin 值。
沒有設定尺寸和 margin 的元素會自適應剩餘空間,位置固定則分配尺寸,尺寸固定便會分配 margin,都是自適應的。這樣就實現了絕對居中的效果。
IE7以下的渲染方式不同,渲染規則也不一樣,它不會讓定位元素去自適應。so~
推薦閱讀:
4. vertical-align 設定圖片垂直居中(行內元素)
我們先來看一下程式碼,程式碼中多設定了一個空的 span
標籤,為什麼要這樣,首先要搞清楚
vertical-align 這個屬性的特點,它是相對兄弟級(line-height)來定位的(這裡又涉及到了line-height和vertical-align的關係了,它們兩個也是基情滿滿的,如有需要,大家可以移步到張鑫旭大神部落格裡進行查閱),並且它僅對行內元素有效,所以,在要定位的元素後面多加一個行內元素 span
來撐開父級的行高,以此來居中。
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.parent{
margin-left: 100px;
margin-top: 100px;
width: 600px;
height: 400px;
border: 1px solid #ddd;
border-radius: 15px;
background-color: #fff;
box-shadow: 0 3px 18px rgba(0,0,0,.5);
text-align: center;
}
.child{
width: 0;
line-height: 400px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<img src="a21.png" alt="">
<span class="child"></span>
</div>
</body>
</html>
效果如下:
5. 使用絕對定位來實現居中
該方法只適用於那些已知寬度和高度的元素,並且絕對定位對頁面佈局沒有影響的情況下。
第一步,絕對定位進行居中的原理是通過把這個絕對定位元素的 left 或 top 的屬性設定為 50%,這個時候並不是居中的,而是比居中的位置偏移了這個元素寬度或高度的一半距離;
第二步,已知寬高的元素,可以使用一個負的 margin-left 或 margin-top 的值來把它拉回到居中的位置,這個負的 margin 值就是這個元素寬度或高度的一半。
未知寬高的元素,中可以使用 transform:translate();
這個屬性進行設定,這個位移屬性是相對於自身進行的,可以傳入兩個引數,分別是
x 和 y 方向上的偏移量,所以可以傳入 (-50%,-50%) 使得元素移動到中心位置實現水平垂直居中。
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.parent{
position: relative;
margin-left: 100px;
margin-top: 100px;
width: 600px;
height: 400px;
border: 1px solid #ddd;
border-radius: 15px;
background-color: #fff;
box-shadow: 0 3px 18px rgba(0,0,0,.5);
text-align: center;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: #3eb777;
border-radius: 15px;
margin-top: -50px;
margin-left: -50%;
/*transform: translate(-50%,-50%); */ /*css3中的新屬性*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
第一步效果:
第二步效果: