寬高未知垂直水平居中

2021-07-16 09:53:15 字數 584 閱讀 1757

寬高未知情況下垂直水平居中很多情況下都會遇到

查了蠻多大家分享的小例子,我也來記錄一下

這裡是css3的 transform 屬性,可以在ie9及以上的瀏覽器水平垂直居中chrome firefox也是沒有問題

這裡是一段話這裡是一段話

這裡是一段話這裡是一段話

這裡是一段話這裡是一段話

.total

.modal.total

.modal

下面是效果圖:

下面這個把父級設定成display:table;子級設定成display:tablecell;

子級會充滿父級,如果父級下面還有多個元素則該子級會佔據一半的父級

水平垂直居中 已知寬高 未知寬高

水平 垂直居中的方法 已知寬高 未知寬高 一 居中元素 已知寬高 1 margin 根據已知的寬高寫死,不推薦 div1 div22 定位 margin top margin left.div1 div23 定位 margin.div1 div24 定位 transform 存在相容問題.div1 ...

未知寬高元素垂直水平居中

最近加班像個牛一樣,很久沒來貼吧逛逛了,深感抱歉 上次有朋友發了個完美讓元素水平垂直居中的帖子,但是貌似僅限已知寬高的元素 沒仔細看,說錯了道歉 這次分享一下未知寬高元素水平垂直的方法。如果你曾經研究過水平垂直居中的方法,那麼下面這幾個方法你肯定知道 下面介紹的方法主要是利用display inli...

CSS未知寬高元素水平垂直居中

方法一 思路 顯示設定父元素為 table,子元素為 cell table,這樣就可以使用vertical align center,實現水平居中 優點 父元素 parent 可以動態的改變高度 table元素的特性 缺點 ie8以下不支援 lang en charset utf 8 未知寬高元素水...