純 CSS 垂直置中 – 超簡單一段搞定

在被垂直居中元素父類別,加這一段就可以,非常簡單

HTML

<div class="main v123-align-middle">
    <div>
    	我要被居中啦!!
    </div>
</div>

CSS

/* 垂直居中 - 父容器 */
.v123-align-middle{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

 

CSS 5種垂直置中方法

CSS 達成 Div 垂直置中的方法研究 (CSS Vertical Centering Complete Guide)

以CSS為中心:完整指南

READ  百度手機驗證 台灣 已成功

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料