如何保持浮層水平垂直居中

2021-10-02 04:54:43 字數 818 閱讀 5358

(1)利用絕對定位和transform



.children
如果不確定子元素寬高度情況下，可以用此方法，不過css3屬性不相容ie低版本瀏覽器

(2) 利用flexbox

.parent
(3) 當子元素的寬高固定，父元素內含有除居中元素外其它元素（空標籤也行）或者父元素的高度不為0時



.parent


.children
(4) display:table-cell

css中有乙個用於豎直居中的屬性vertical-align，但只有 當父元素為td或者th時，這個vertical-align屬性才會生效，對於其他塊級元素，例如 div、p等，預設情況下是不支援vertical-align屬性的，可以設定塊級元素的display型別為table-cell，啟用vertical-align屬性，但display:table-cell存在相容性問題，所以這種方法沒辦法跨瀏覽器相容。

哈哈


.parent


.child
(5) 利用定位與margin: auto;

哈哈


.parent


.child
原理：因為 parent 寬度等於 child寬度 + left + right + marginleft + marginright，當設定了left:0;right:0;margin: auto;時候，

就相當於左右平分了寬度，所以會水平居中，垂直方向也是一樣的道理

CSS篇之2 如何保持浮層水平垂直居中

如何保持浮層水平垂直居中.note 一 利用絕對定位與transform 將父元素定位，子元素如下 children 二 利用flexbox parent 三 當子元素的寬高固定，父元素內含有除居中元素外其它元素 空標籤也行 或者父元素的高度不為0時 將父元素定位，子元素絕對定位，利用margin負...

CSS3清除浮動 保持浮層水平垂直居中

1 清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法 1 在非ie瀏覽器 如firefox 下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。這個現...

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...