February 23, 2020

CSS 垂直水平置中

三種最佳作法


文 / 西打藍 Siddharam

垂直水平置中


我們的目標,是讓咖啡色方塊,能在藍色方塊垂直置中。



<div class="outer">

  <div class="inner"> </div>

</div>

.outer {
  width: 200px;
  heieght: 200px;
  background: rgb(2, 186, 192);
}

inner {
    width: 50px;
    height: 50px;
    background: burlywood;
}





有興趣的你,可以開啟檢查工具調整樣式看看。

一、flex 作法


flex 的 justify-content 負責 inner 水平排列,而 align-items 則是垂直排列。



.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}



二、absolute 絕對定位作法


top、left 讓物體水平垂直置中,但必須扣除物體本身寬高,所以需要加上 translate 的 -50% 位移。



.outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




三、flex、margin 作法


這是我最新學到的一招,margin auto 本身就能做到置中的效果,加上 flex 讓 inner 上下左右擴展的作用,達到垂直水平置中的效果。



.outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}







閱讀量




聯絡與合作


有文章撰寫、網站設計(UI/UX)、平面設計、網站工程需求,皆可以來信詢問,在關於下方有參考作品。

或是想分享心情、聊聊天、交朋友,可以來秘密通道讓我知道唷。

Email: aaa24295234@gmail.com