十年挑戰之水平垂直置中

作者: Calpa Liu
字數:214
出版:2019 年 1 月 20 日
分類: 前端開發
#CSS#回顧
相比起當年的水平置中手法,現在達到相同效果的方法多了很多,例如 Flex, Grid 等。就讓我們趁著 Facebook 回顧當年今日的浪潮重溫一下吧。

HTML 代碼

這裡我們用的 HTML 代碼很簡單,只有一個父組件和一個子組件。

<div class="container">
	<div class="child">
		2008<br/>
		絕對定位
	</div>
</div>

2009 版本

2009
2009

我們可以使用父組件絕對定位,加子組件相對定位,同時改變子組件的 top 位置,來垂直置中。然後用 text-align: center 來水平置中。

.container {
  width: 300px;
  height: 300px;
  background: white;
  border: 1px solid black;

  position: relative;

  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
  }
}

Codepen 參考鏈接

2019 版本

方法一:

修改父組件為 flex,加 justify-content: center 達到水平置中,align-items: center 達到垂直置中,混合一起就是水平垂直置中了。

Imgur
Imgur

CSS 代碼如下:

.container {
  width: 300px;
  height: 300px;
  background: black;

  display: flex;
  // justify-content: center;
  // align-items: center;

  .child {
    margin: auto;
    color: white;
  }
}

Codepen 參考鏈接

One more thing

Imgur
Imgur

相比起十年前的 JavaScript 生態,現在的發展可以說是完全不同了。

想跟上前端開發的最新技術與實戰分享嗎?立即訂閱本站,掌握 React、Vue、TypeScript 等趨勢!
關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章