前端學習筆記一

• flexbox學習
• 居中佈局
• 藉助flex簡單實現水平垂直居中
• 利用絕對定位
• 行內元素居中

flexbox學習

這裡推薦一個簡短有趣的連結，可以同時對比其他的佈局方案：學習css佈局-flexbox。

另外moz的開源網站也有介紹：使用 CSS 彈性盒子。

不過介紹最清晰的還是阮一峰的Flex佈局教程：語法篇。

居中佈局

在各種場合下，居中使用的方式也不一樣。這裡簡要記錄一下目前使用到的比較有效的方式：

藉助flex簡單實現水平垂直居中

.flex{
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
  background-color:#333;
}

利用絕對定位

設定父物體為relative，子物體為absolute，再新增以下css

top: 50%; 
left: 50%; 
transform: translate(-50%, -50%)

行內元素居中

設定height=line-height，再新增text-align=center屬性

width:100px;             
height:100px;             
line-height:100px;             
text-align:center;             
background:gray;

目前只用到這幾種，還比較懵。不過發現了知乎上一個討論，有很多大神給出了其他方案：用 CSS 實現元素垂直居中，有哪些好的方案？

還有一個精華濃縮版：CSS垂直居中的6種方法