居中布局

?

水平居中

父元素和子元素的寬度都未知

?

inline-block + text-ailgn

.child{display:inline-block;}

.parent{text-align:center;} ? ?

優點：兼容性好?

缺點：子元素文本繼承了text-align屬性，子元素要額外加text-align:left;

?

table + margin

.child{display:table; margin:0 auto;}

優點：只需要設置子元素的樣式

?

absolute + transform

.parent{position:relative;}

.child{position:absolute; left:50%; transform: translateX(-50%);

優點：居中子元素不會對其他元素產生影響

缺點：transform是CSS3的屬性，存在兼容性問題

?

flex + justify-content

.parent{display:flex; justify-content:center;}

優點：只需要設置父元素的樣式

缺點：兼容性問題

?

flex + margin

.parent{display:flex;}

.child{margin:0 auto;}

?

垂直居中

父容器和子容器的高度都未知

?

table-cell + vertical-align

.parent{display:table-cell; vertical-align:middle;}

優點：兼容性好

?

absolute + transform

.parent{position:relative;}

.child{position:absolute; top:50%; transform:translateY(-50%);}

優點：子元素不會干擾其他元素

缺點：兼容性

?

flex + align-item

.parent{display:flex; align-items:center;}

優點：只需要設置父元素

缺點：兼容性問題

?

水平垂直居中

父容器和子容器的高度都未知

?

inline-block + text-align + table-cell + vertical-align

.parent{text-align:center; display:table-cell; vertical-align:middle;}

.child{display: inline-block;}

absolute + transform

.parent{position:relative;}

.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

flex + justify-content + align-item

.parent{display:flex; justify-content:center; align-items:center;}

?

多列布局

定寬-自適應

float+margin

.left{float:left; width:100px;}

.right{margin-left:120px;}

float+margin+fix

<div class="left"></div>

<div class="right-fix">

? ? <div class="right"></div>

</div>

外層在包裹一個容器

?

.left{float:left; width:100px; position: relative;}

.right-fix{float:right; width:100%; margin-left:-100px;}

.right{margin-left:120px;}

兼容性很好，但是多了層right-fix的結構

?

float+overflow

.left{float:left; width:100px; margin-right: 20px;}

.right{overflow:hidden;

table

.parent{display:table; width:100%; table-layout:fixed;}

.left,.right{display:table-cell;}

.left{width:100px; padding-right:20px;}

flex

.parent{display:flex;}

.left{width:100px; margin-right:20px;}

.right{flex:1;}

?

不定寬-自適應

float + overflow

.left{float:left; margin-right:20px;}

.right{overflow:hidden;}

table

.parent{display:table; width:100%;}

.left,.right{display:table-cell;}

.left{width:0.1%; padding-right:20px;}

flex

.parent{display:flex;}

.left{margin-right:20px;}

.right{flex:1;}

?

轉自：?https://segmentfault.com/a/1190000003113119

作者：?phank

轉載于:https://www.cnblogs.com/-ding/p/6022720.html

總結

以上是生活随笔為你收集整理的css页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。