那要怎麼解決這個問題呢?
以下將有詳細解說
這是初學者常會使用的方法
不過我並不太推薦使用這方法
因為這方法只能設定單行
一旦有多行，第二行會比第一行間距就會變很大
此段適用於文字
html語法
<div class="ex1">
垂直置中
</div>css語法
.ex1{
width: 150px;
height: 150px;
line-height: 150px;
max-width: 100%;
display: block;
text-align: center;
background-color: #eb9700;
}
前一個介紹的方法，只適用於單行文字
要讓多行文字，或是區塊垂直置中，可以使用偽元素來進行
在偽元素和垂直置中的元素加上
display:inline-block，vertical-align: middle
這樣就會呈現下面的排版，藍色是偽元素的區塊
我們可以看到，因為需要垂直置中的主要區塊，高度比偽元素還高
所以變成偽元素對齊主區塊了，所以偽元素的高度必須是100%
html語法
<div class="ex2-demo">
<div class="ex-demo-img">
<img src="圖片路徑">
</div>
</div>css語法
.ex2-demo{
width: 150px;
height: 150px;
max-width: 100%;
display: block;
text-align: center;
background-color: #eb9700;
font-size: 0;
}
.ex2-demo:before{
width:0;
height:100%;
display:inline-block;
position:relative;
vertical-align:middle;
}
.ex2-demo:after{
width:0;
height:100%;
display:inline-block;
position:relative;
vertical-align:middle;
}
我們可以寫一個偽table來讓裡面元素垂直置中
簡單來說，就是最外層，加上display:table
然後需要垂直置中的區塊，加上display:table-cell和vertical-align: middle;
這樣元素就會呈現垂直置中
html語法
<div class="ex3-box">
<div class="ex3-img">
<img src="圖片路徑">
</div>
</div>css語法
.ex3-box{
width: 150px;
height: 150px;
max-width: 100%;
display: table;
background-color: #eb9700;
}
.ex3-img{
display:table-cell;
vertical-align:middle;
text-align:center;
}
這是利用絕對位置來讓元素垂直置中
要先在最外層加上position:relative
裡面的元素加上position: absolute
再來需要利用到calc這語法
這是可以讓你在CSS裡做運算的語法
如果你直接設定top:50%，left:50%
這樣你會發現，位置並沒有完全垂直置中
所以需要計算一下，如果你的圖片或元素的寬是50，那計算方式如下
width:calc(50% - 25px)
這邊要注意，計算的–旁邊都需要一個空格
在計算高的位子，用一樣的方法 height:calc(50% - 25px)
這方式只適用於已確定大小的元素，如果大小不一樣的話，位置將不會垂直置中
html語法
<div class="ex4-box">
<div class="ex4-img">
<img src="圖片路徑">
</div>
</div>css語法
.ex4-box{
width: 150px;
height: 150px;
max-width: 100%;
display: block;
background-color: #eb9700;
position: relative
}
.ex4-img{
top: calc(50% - 25px);
left: calc(50% - 25px);
position: absolute;
}
5.使用 Flexbox
這是目前為止，最簡單的垂直置中方式
而他也能讓裡面的圖片自適應外面框架
用的方法很簡單，只要在最外層定義好語法就能使用
display:flex
align-items:center;(垂直置中)
justify-content:center;(水平置中)
這樣就可以做出垂直置中了
html語法
<div class="ex5-box">
<img src="圖片路徑">
</div>css語法
.ex5-box{
width: 150px;
height: 150px;
max-width: 100%;
background-color: #eb9700;
display: flex;
align-items: center;
justify-content: center;
}
這方法比較複雜
他需要用到我們前面教到的偽元素和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;
html語法
<div class="ex6-box">
<div class="ex6-img">
<img src="圖片路徑">
</div>
</div>css語法
.ex6-box{
width: 150px;
height: 150px;
max-width: 100%;
background-color: #eb9700;
position: relative;
font-size: 0;
}
.ex6-img{
width:100%;
height: 100%;
position: absolute;
text-align: center;
}
.ex6-img:before{
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.ex6-img img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: inline-block;
vertical-align: middle;
}