垂直居中和水平居中總結

2021-07-12 07:49:44 字數 1213 閱讀 6994

#container

#center

以上**可使塊級子元素水平垂直居中,為inline-block的子元素只能垂直居中,若也想其水平垂直居中確保在父元素樣式中新增 text-align: center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。

當子元素都為行內元素(行內元素不能包裹塊級元素,所以就沒有加img啦),效果和塊級元素一樣各成一行,我也覺得不可思議。

當子元素都為塊級元素

當子元素都為行內塊元素

咳咳,看著他們乖乖的排列真開心啊~~~

優勢在於不需要知道父元素和子元素的寬高。

完美二維居中,屢試不爽,然,常在河邊走,哪有不濕鞋···這玩意兒會導致其內部文字模糊···咳咳,死穴。搞搞啥的就行了。

#container

#center

這樣依然可以玩居中,而且不用擔心相容性問題,唯一麻煩些的也就是要確定子元素寬高

在ie上相容很不理想,雖然其他瀏覽器灰常完美,但是沒法···水桶的容量總是取決於最短的木板·····

其實無所謂line-height是否等於height,文字始終是在line-height垂直中間的

水平居中和垂直居中

行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...

CSS 垂直居中和水平居中

position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...

CSS垂直居中和水平居中

總括 css居中一直是乙個比較敏感的話題,為了以後開發的方便,樓主覺得確實需要總結一下了,總的來說,居中問題分為垂直居中和水平居中,實際上水平居中是很簡單的,但垂直居中的方式和方法就千奇百怪了。人生用物,各有天限 夏澇太多,必有秋旱。水平居中設定 行內元素 設定 text align center ...