Amos除了這超過25種垂直置中外還有別的方式嗎?

2019鐵人賽垂直置中 css 網頁教學 javascript

CSScoke

2018-11-14 00:45:38

3533 瀏覽

老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧，其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式，只是有些概念頗雷同我就沒特別算進去了，像是鐵人賽第28天的「左圖右文版面，文字垂直置中的方式?」裡面就有利用圖片自身高度來達到垂直置中的效果。至於未來會不會繼續生出更多的垂直置中技巧呢? 雖然我認為25個垂直置中技巧已經到頂了，但當初我寫出15個垂直置中技巧時，我也是認為到頂了XDDDD，後面卻硬生生的寫出了 25種方式，真的超自虐的(笑)。

最後一篇了，這篇我不想寫CSS垂直置中了，如果真的要講還有沒有其他的垂直置中技巧，大概就是 JavaScript 了，以往 Amos 有時候也會利用 JavaScript 或者是 JQuery 來做垂直置中，但就是要看稿件需求就是了，所以這最後一天我們就用 JQuery 來做垂直置中吧! 首先先來看一下原始碼

<div class="wrap">
	<div class="text">
		<h3>Amos & CSS coke</h3>
		<p>
            垂直置中寫了30種也太神經了一點，不過寫完的爽度實在超高阿，
            請叫我垂直置中王啦! 哇哈哈哈哈哈哈(被打)
        </p>
	</div>
</div>

.wrap{
	height: 500px;
	border:1px solid #aaa;
}
.text{
	background-color: #ccc;
	width: 500px;
	margin: auto;
	padding: 30px;
	line-height: 1.5;
}

let _wrap_Hi = $('.wrap').height();
let _text_Hi = $('.text').outerHeight();
let _mt = (_wrap_Hi - _text_Hi) / 2;
$('.text').css({'margin-top': _mt});

範例頁面

上面的寫法其實很簡單，就把先把父層的空間抓到，接著再抓子層的高度，兩者相減之後再除2，這樣就得到了一半的父層剩餘空間，接著我們把他設定到子層的margin-top去就搞定啦，就是很簡單的加減乘除計算囉，大家也去試試看吧。