純 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

View all posts