未知寬高的元素水平垂直居中方法總結

1.父元素設定display:table;子元素設定display:table-cell;

缺點：ie7不支援，而且子元素會填滿父元素，不建議使用

2.使用css3 transform:translate(-50%; -50%)

缺點:相容性不好，ie9+

3.使用flex布局

缺點:相容性不好，ie9+

4.利用偽類元素

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>未知寬高元素水平垂直居中
title
>
head
>
<
style
>
.outer1
.inner1
.outer2
.inner2
.outer3
.outer4
.outer4:before
.inner4
style
>
<
body
>
<
div 
class
="outer1"
>
<
div 
class
="inner1"
>table-cell 實現
div>
div>
<
div 
class
="outer2"
>
<
div 
class
="inner2"
>css3
div>
div>
<
div 
class
="outer3"
>
<
div 
class
="inner3"
>flex布局
div>
div>
<
div 
class
="outer4"
>
<
div 
class
="inner4"
>偽類元素
div>
div>
body
>
html
>

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

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

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

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

寬高未知垂直水平居中

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