CSS元素居中方法總結

css實現元素居中。

.one

這種方法基本瀏覽器都能夠相容，不足之處就是需要固定寬高。

2、使用position:fixed,同樣設定left、top、margin-left、margin-top的屬性

.two

大家都知道的position:fixed,ie是不支援這個屬性的

3、利用position:fixed屬性，margin:auto這個必須不要忘記了。

.three

4、利用position:absolute屬性，設定top/bottom/right/left

.four

5、利用display:table-cell屬性使內容垂直居中

.five

6、最簡單的一種使行內元素居中的方法，使用line-height屬性

.six

這種方法也很實用，比如使文字垂直居中對齊。這種方法對於在盒子內部垂直居中是非常有效果的，但對於在整個body中居中不適用

7、使用css3的display:-webkit-box屬性，再設定-webkit-box-pack:center/-webkit-box-align:center

.seven

8、使用css3的新屬性transform:translate(x,y)屬性

.eight

這個方法可以不需要設定固定的寬高，需要使用絕對定位在移動端用的會比較多，在移動端css3相容的比較好

9、最高大上的一種，使用:before元素

.nine

.nine:before
.nine .content

10、css3還有一種left:50%;top:50%;transform:translate(-50%,-50%);

這種方法非常實用。而且如果不需要左右居中，那麼translate裡面也就只寫一種即可。

11、還有一種是布局方面的居中，如果有3個元素在一排，讓其3個在頁面水平居中，3個元素之間的間距相等

使用方法是採用偽元素，然後使用彈性布局實現 總結：

子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，採取的布局方案不同。下面進行分析： 行內元素：對父元素設定text-align:center; 定寬塊狀元素: 設定左右margin值為auto; 不定寬塊狀元素: 設定子元素為display:inline,然後在父元素上設定text-align:center; 通用方案: flex布局，對父元素設定display:flex;justify-content:center;

垂直居中對於子元素是單行內聯文字、多行內聯文字以及塊狀元素採用的方案是不同的。 父元素一定，子元素為單行內聯文字：設定父元素的height等於行高line-height 父元素一定，子元素為多行內聯文字：設定父元素的display:table-cell或inline-block，再設定vertical-align:middle; 塊狀元素:設定子元素position:fixed（absolute），然後設定margin:auto; 通用方案: flex布局，給父元素設定。

兩個併排元素都為inline或inline-block元素，然後設定左邊元素vertival-align:middle即可

CSS元素居中方法總結

左右居中 text align center 上下居中 line height height數值 margin auto 讓盒子左右居中。position absolute left 50 margin left 寬的一半 top 50 margin top 高的一半 讓盒子上下左右居中。缺點 不夠...

元素垂直居中方法總結

以下總結了一些常見的元素垂直居中方法 首先，基本的html和css為 wrap wrap div 我是前端狗 方法 方案一 絕對定位負margin50 方法 wrap v center 方案一 優化版 利用calc支援單位運算，致命缺點uc這2貨嗝屁了，國內移動端別想了 v center 方案一 再...

元素居中方法

一 水平居中方式 行內元素 text alien center 塊元素 已知寬度 1 margin 0 auto 2 position margin組合 left 50 margin left px 未知寬度 1 display inline inline block text alien cent...