CSS垂直置中的辦法
2020.12.14
CSS垂直置中的辦法
line-height
這是初學者常會使用的方法,不過我並不太推薦使用這方法,因為這方法只能設定單行,一旦有多行,第二行會比第一行間距就會變很大,此段適用於文字
展示
垂直置中
HTML
複製已複製
<div class="shape-ex1">垂直置中</div>
CSS
複製已複製
.shape-ex1{
width: 150px;
height: 150px;
line-height: 150px;
max-width: 100%;
display: block;
text-align: center;
background-color: #eb9700;
}
利用偽元素(before,after)
前一個介紹的方法,只適用於單行文字。要讓多行文字,或是區塊垂直置中,可以使用偽元素來進行,在偽元素和垂直置中的元素加上"display:inline-block"和"vertical-align:middle",這樣就會呈現下面的排版,藍色是偽元素的區塊
展示
HTML
<div class="shape-ex2">
<div class="shape-ex2-block"></div>
</div>
CSS
.shape-ex2{
width: 150px;
height: 150px;
max-width: 100%;
display: block;
text-align: center;
background-color: #bbb;
}
.shape-ex2-block{
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
background-color: #000; /*為展示區域上色,使用代碼時請自行刪除*/
}
.shape-ex2:before{
content: '';
width: 10px; /*為展示區域加寬,使用代碼時請改成0*/
height: 100%;
display: inline-block;
position: relative;
vertical-align: middle;
background-color: #006cff; /*為展示區域上色,使用代碼時請自行刪除*/
}
.shape-ex2:after{
content: '';
width: 10px; /*為展示區域加寬,使用代碼時請改成0*/
height: 100%;
display: inline-block;
position: relative;
vertical-align: middle;
background-color: #006cff; /*為展示區域上色,使用代碼時請自行刪除*/
}
display:table
我們可以寫一個偽table來讓裡面元素垂直置中。簡單來說,就是最外層,加上"display:table"然後需要垂直置中的區塊,加上"display:table-cell"和"vertical-align:middle"這樣元素就會呈現垂直置中
展示
垂直置中
HTML
<div class="shape-ex3">
<div class="shape-ex3-block">垂直置中</div>
</div>
CSS
.shape-ex3{
width: 150px;
height: 150px;
max-width: 100%;
display: table;
background-color: #bbb;
}
.shape-ex3-block{
width: 20px;
height: 20px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
position
這是利用絕對位置來讓元素垂直置中,要先在最外層加上"position:relative",裡面的元素加上"position: absolute",再來需要利用到calc這語法,這是可以讓你在CSS裡做運算的語法,如果你直接設定"top:50%","left:50%",這樣你會發現,位置並沒有完全垂直置中,所以需要計算一下,如果你的圖片或元素的寬是20,那計算方式如下,"width:calc(50% - 10px)",這邊要注意,計算的–旁邊都需要一個空格,在計算高的位子,用一樣的方法"height:calc(50% - 10px)",這方式只適用於已確定大小的元素,如果大小不一樣的話,位置將不會垂直置中
展示
HTML
<div class="shape-ex4">
<div class="shape-ex4-block"></div>
</div>
CSS
.shape-ex4{
width: 150px;
height: 150px;
max-width: 100%;
display: block;
background-color: #bbb;
position: relative;
}
.shape-ex4-block{
width: 20px;
height: 20px;
display: block;
top: calc(50% - 10px);
left: calc(50% - 10px);
position: absolute;
background-color: #000;
}
Flexbox
這是目前為止,最簡單的垂直置中方式,而他也能讓裡面的圖片自適應外面框架。用的方法很簡單,只要在最外層定義好語法就能使用,"display:flex","align-items:center"(垂直置中),"justify-content:center"(水平置中),這樣就可以做出垂直置中了
展示
HTML
<div class="shape-ex5">
<div class="shape-ex5-block"></div>
</div>
CSS
.shape-ex5{
width: 150px;
height: 150px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #bbb;
}
.shape-ex5-block{
width: 20px;
height: 20px;
display: block;
background-color: #000;
}
position加上偽元素
這方法比較複雜,他需要用到我們前面教到的偽元素和position結合。這方法的好處是,他裡面的圖片可以自適應外面的框架。如果比例相同,則會滿版呈現;如果比例不同,則會依照width:100%或是height:100%呈現。首先要在最外層用"position:relative",再來是第二層,利用偽元素和"position: absolute"來垂直置中, 然後在圖片設定100%顯示,和與偽元素垂直置中的語法,如下:
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: inline-block;
vertical-align: middle;
展示
HTML
<div class="shape-ex6">
<div class="shape-ex6-block">
<img src="圖片路徑" class="shape-ex6-img" />
</div>
</div>
CSS
.shape-ex6{
width: 150px;
height: 150px;
max-width: 100%;
display: block;
background-color: #bbb;
position: relative;
font-size: 0;
}
.shape-ex6-block{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
.shape-ex6-block:before{
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.shape-ex6-img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: inline-block;
vertical-align: middle;
width: 20px; /*為展示區域顯示,使用代碼時請自行刪除*/
height: 20px; /*為展示區域顯示,使用代碼時請自行刪除*/
background-color: #000; /*為展示區域上色,使用代碼時請自行刪除*/
}