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

水平、垂直居中的方法 (已知寬高/未知寬高)

--------------一、居中元素 已知寬高----------------------

1、margin — 根據已知的寬高寫死，不推薦

.div1

.div2

2、定位 + margin-top + margin-left

.div1

.div2

3、定位 + margin

.div1

.div2

4、定位 + transform  --- 存在相容問題

.div1

.div2

5、flex 布局 --- 存在相容問題

.div1

.div2

1、定位 + transform — 存在相容問題

設定父元素為相對定位，子元素絕對定位

.div3

.div4

2、flex 布局  --- 存在相容問題

設定父元素為 flex 彈性盒模型，並在主軸和副軸上設定居中

.div3

3、display: table-cell --- 早期屬性   無相容問題

//父級要固定寬高

.div3

html

="div1"
>
="div2"
>居中元素 已知寬高<
/div>
<
/div>
="div3"
>
="div4"
>居中元素 未知寬高<
/div>
<
/div>
<
/body>

總結起來是以下幾點：

水平居中
行內元素: text-align: center
塊級元素: margin: 0 auto
position:absolute +left:50%+ transform:translatex(-50%)
display:flex + justify-content: center
垂直居中
設定line-height 等於height
position：absolute +top:50%+ transform:translatey(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

寬高未知垂直水平居中

寬高未知情況下垂直水平居中很多情況下都會遇到 查了蠻多大家分享的小例子，我也來記錄一下 這裡是css3的 transform 屬性，可以在ie9及以上的瀏覽器水平垂直居中chrome firefox也是沒有問題 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 total...

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

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

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

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