點擊上方藍字關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
前端布局是整個web開發非常重要的一環,也是最基礎和最前面的一個環節。有關居中布局分垂直和水平方向。今天我簡單搞幾個常用的垂直居中的CSS寫法。
一、使用table-cell vertical-align其原理就是将父框轉化為一個表格單元格顯示,相當為td/th,再通過設置其屬性vertical-align将其内容垂直居中。代碼如下所示:
這個方法的優點就是兼容性較好,IE8以上均支持。效果如下所示:
這個方法的優點是居中元素不會對其他的元素産生影響。
不好的地方是:transform屬于CSS3内容,兼容性存在一定問題。需要添加一些前綴。
三、使用flex align-items
通過設置CSS3中的布局利器flex中的屬性align-times,使子框垂直居中。
這個方法的好處是: 隻設置parent
不好的地方是兼容性存在一定問題
最後總結一下:
前端布局有居中布局,多列布局以及全局布局等好多玩法。下篇在續
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!