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

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

HTML

<div class="main v123-xy-center">
    Vertical and horizontal center
</div>

CSS

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

檢視結果

CSS 5種垂直置中方法

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

以CSS為中心:完整指南

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

Bitcoin 比特幣錢包:

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

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