css居中小結

從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。

css居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。

本文一下**中 .outer是父元素的類名，.inner塊級代表子元素,span代表行內子元素

直接設定其父元素

.ourter

也非常簡單吶

設定該塊級元素

div

我是這樣理解的：margin為auto即相當於外邊距的值是自動的，相對的，所以在絕對定位下將失效。不過還是可以將其margin設為具體數值滴。

有很多關於垂直居中tricks,博主在這裡只介紹一些比較簡單常用的

如果對高度沒有要求的哈

1）如果對父元素的高度沒有具體的要求的話，將父元素的padding-top padding-bottom設定為相同的值即可。

.outer

.outer

但是！！！一定要確保不會換行，也就是只有一行。

3）在保持父元素具體數值寬度不變且有不止一行時，可以使用一點小tricks,比如

.outer

.outer::before
/*html**如下*/
span1
span2

效果：1）如果已知子元素的高度，可以這樣

.outer

.inner

2）如果不知道子元素的具體高度，可以利用css的transform屬性，對1）進行小改動，如下：

.outer

.inner

這時我們可以用乙個div把所有子元素包裹起來，變成乙個子元素，然後就可以繼續使用上面的方法了。

** 最最後！上面的所有方法都是在不使用flex的前提下的才使用的！解決居中問題最爽的當然是flex布局啦，o(∩_∩)o~~ **

什麼？！還不會使用flex布局？趕緊點下面~

flex布局學習總結

使用flex，管它是行內元素還是塊級元素，管它有幾個元素，統統搞定！

舉個栗子！

實現多個塊級元素的垂直加水平居中

.outer

如果加上最後一行，則豎直排列子元素，即：

是不是很簡便膩~o(∩_∩)o哈！

css居中小結

直接設定其父元素 ourter 不管有幾個行內元素，一行 即可搞定，so easy 也非常簡單吶 設定該塊級元素 div 但是！但是！如果該元素的position為absolute的話，該方法會失效。我是這樣理解的 margin為auto即相當於外邊距的值是自動的，相對的，所以在絕對定位下將失效。不...

CSS實現水平垂直居中小結

水平居中實現只要設定margin 0 auto 就可以實現 lang en charset utf 8 水平居中title type text css box style head id box div body html lang en charset utf 8 垂直居中title type t...

css居中小技巧

一 行內元素 水平居中 在父元素的樣式中新增 text align center 二 定寬塊級元素 水平居中 所謂定寬塊級元素指塊級元素的寬度指定，而不是預設的100 否則此方法無效 html body div 我是定寬塊狀元素，哈哈，我要水平居中顯示。div body css style divs...