純 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為中心:完整指南

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

18fCwNnEJ7UfMNS3GcUczPNa72NMsWcvaU



ann71727

READ  WHMCS Invalid CSRF Protection Token

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

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