tft每日頭條

 > 生活

 > 常用的水平居中和垂直居中方法

常用的水平居中和垂直居中方法

生活 更新时间:2025-04-22 15:29:53

點擊上方藍字關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

前端布局是整個web開發非常重要的一環,也是最基礎和最前面的一個環節。有關居中布局分垂直和水平方向。今天我簡單搞幾個常用的垂直居中的CSS寫法。

一、使用table-cell vertical-align

其原理就是将父框轉化為一個表格單元格顯示,相當為td/th,再通過設置其屬性vertical-align将其内容垂直居中。代碼如下所示:

常用的水平居中和垂直居中方法(搞定垂直居中的三種方法)1

這個方法的優點就是兼容性較好,IE8以上均支持。效果如下所示:

常用的水平居中和垂直居中方法(搞定垂直居中的三種方法)2

這個方法的優點是居中元素不會對其他的元素産生影響。

不好的地方是:transform屬于CSS3内容,兼容性存在一定問題。需要添加一些前綴。

常用的水平居中和垂直居中方法(搞定垂直居中的三種方法)3

三、使用flex align-items

通過設置CSS3中的布局利器flex中的屬性align-times,使子框垂直居中。

常用的水平居中和垂直居中方法(搞定垂直居中的三種方法)4

這個方法的好處是: 隻設置parent

不好的地方是兼容性存在一定問題

常用的水平居中和垂直居中方法(搞定垂直居中的三種方法)5

最後總結一下:

前端布局有居中布局,多列布局以及全局布局等好多玩法。下篇在續

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved