css居中小結

2021-07-28 02:37:13 字數 1458 閱讀 2962

直接設定其父元素

.ourter

不管有幾個行內元素，一行**即可搞定，so easy~

也非常簡單吶

設定該塊級元素

div

但是！但是！如果該元素的position為absolute的話，該方法會失效。

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

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

如果對高度沒有要求的哈

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

.outer
2）如果要求父元素的高度為具體數值時，且確保行內元素不會換行時，可以設定line-height等於父元素的高度

.outer
此時，即可實現行內元素的垂直居中。若把最後一行加上，即可同時實現水平和垂直居中。

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

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

.outer


.outer::before


/*html**如下*/


span1


span2
但是，注意：因為vertical-align是指行內元素的基線相對於該元素所在行的基線的垂直對齊方式，所以該方法只對行內元素有效

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

.outer


.inner
注意子元素和父元素的position，切記父元素的position是relative

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

.outer


.inner
3）但以上兩種方式對於有多個塊級子元素的情況就不適用了，比如，這樣的情況

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

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

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

flex布局學習總結

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

舉個栗子！

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

.outer
效果圖如下:

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

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

css居中小結

從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。本文一下 中 outer是父元素的類名，inner塊級代表子元素,span代表行內子元素 直接設定其父元素 ourter不管有幾個行內元素，一行 即...

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...