CSS垂直置中的辦法

Line-height

垂直置中

.shape-ex1{
    width: 150px;
    height: 150px;
    line-height: 150px;
    max-width: 100%;
    display: block;
    text-align: center;
    background-color: #eb9700;
}

這是初學者常會使用的方法，不過我並不太推薦使用這方法，因為這方法只能設定單行，一旦有多行，第二行會比第一行間距就會變很大，此段適用於文字

Line-height範例 -codepen

利用偽元素(before，after)

.shape-ex2{
		width: 150px;
		height: 150px;
		max-width:  100%;
		display: block;
		text-align: center;
		background-color: #eb9700;
	}
	.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; /*為展示區域上色，使用代碼時請自行刪除*/
	}

前一個介紹的方法，只適用於單行文字。要讓多行文字，或是區塊垂直置中，可以使用偽元素來進行，在偽元素和垂直置中的元素加上

利用偽元素(before，after)範例 -codepen

Display:table

垂直置中

.shape-ex1{
	width: 150px;
	height: 150px;
	line-height: 150px;
	max-width: 100%;
	display: block;
	text-align: center;
	background-color: #eb9700;
}

我們可以寫一個偽table來讓裡面元素垂直置中。簡單來說，就是最外層，加上display:table然後需要垂直置中的區塊，加上display:table-cell和 vertical-align:middle這樣元素就會呈現垂直置中

Display:table範例 -codepen

Position

.shape-ex4{
	width: 150px;
	height: 150px;
	max-width:  100%;
	display: block;
	background-color: #eb9700;
	position: relative;
}
.shape-ex4-block{
	width: 20px;
	height: 20px;
	display: block;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	position: absolute;
	background-color: #000;
}

這是利用絕對位置來讓元素垂直置中，要先在最外層加上”position:relative”，裡面的元素加上”position: absolute”，再來需要利用到calc這語法，這是可以讓你在CSS裡做運算的語法，如果你直接設定”top:50%”，“left:50%“，這樣你會發現，位置並沒有完全垂直置中，所以需要計算一下，如果你的圖片或元素的寬是20，那計算方式如下，“width:calc(50% - 10px)“，這邊要注意，計算的–旁邊都需要一個空格，在計算高的位子，用一樣的方法”height:calc(50% - 10px)“，這方式只適用於已確定大小的元素，如果大小不一樣的話，位置將不會垂直置中

Position範例 -codepen

Flexbox

.shape-ex5{
width: 150px;
height: 150px;
max-width:  100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #eb9700;
}
.shape-ex5-block{
width: 20px;
height: 20px;
display: block;
background-color: #000;
}

這是目前為止，最簡單的垂直置中方式，而他也能讓裡面的圖片自適應外面框架。用的方法很簡單，只要在最外層定義好語法就能使用，“display:flex”，“align-items:center”(垂直置中)，“justify-content:center”(水平置中)，這樣就可以做出垂直置中了

Flexbox範例 -codepen

Position加上偽元素

.shape-ex6{
width: 150px;
height: 150px;
max-width:  100%;
display: block;
background-color: #eb9700;
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: 40px; /*為展示區域顯示，使用代碼時請自行刪除*/
height: 40px; /*為展示區域顯示，使用代碼時請自行刪除*/
background-color: #000; /*為展示區域上色，使用代碼時請自行刪除*/
}

這方法比較複雜，他需要用到我們前面教到的偽元素和position結合。這方法的好處是，他裡面的圖片可以自適應外面的框架。如果比例相同，則會滿版呈現；如果比例不同，則會依照width:100%或是height:100%呈現。首先要在最外層用”position:relative”，再來是第二層，利用偽元素和”position: absolute”來垂直置中，然後在圖片設定100%顯示，和與偽元素垂直置中的語法。(注意!這方法要使用font-size:0 來達成)

Position加上偽元素範例 -codepen