1.單列布局

1.1 水平居中

父元素 text-align:center;子元素：inline-block;

• 優(yōu)點：兼容性好；

• 不足：需要同時設置子元素和父元素

子元素 margin:0 auto;

• 優(yōu)點：兼容性好

• 缺點：需要指定寬度

父元素：relative；子元素：absolute；left:50%;margin-left:-寬度的一半

• 優(yōu)點：兼容性好

• 缺點：需要知道子元素的寬度

父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

• 優(yōu)點：不需要知道子元素的寬度

• 缺點：兼容性差 （新時代的你們，現(xiàn)在新的瀏覽器支持了，放心用了）

彈性盒子：父元素：display:flex;justify-content:center;

• 優(yōu)點：簡單

• 缺點：兼容性差 （新時代的你們，現(xiàn)在新的瀏覽器支持了，放心用了）

1.2 垂直居中

vertical-align:center;

line-height

父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

父元素：display:flex;align-items:center;

1.3 水平垂直居中

父元素：display:table-cell;vertical-align:middle;text-align:center;子元素；display:inline-block;

父元素：position:relative;子元素：position:absolute?50%;left:50%;margin-left:寬度的一半；margin-top:高度的一半；或者 transform:translate(-50%,-50%);

父元素{display:flex;justify-content:center;align-items:center;}

2.多列布局

2.1 左側定寬，右側自適應

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

.left{width:寬度值;float:left;} .right{overflow:hidden;}

table 實現(xiàn)

flex 實現(xiàn)

2.2 右側定寬左側自適應

float margin 實現(xiàn)

table 實現(xiàn)

flex 實現(xiàn)

2.3 左邊兩列定寬，右側自適應

float margin 實現(xiàn)

float overflow 實現(xiàn)

table 實現(xiàn)

*{

margin: 0;

padding: 0;

}

.parent{

width: 100%;

display: table;

table-layout: fixed;

}

.left,

.center{

background: red;

display: table-cell;

width: 300px;

height: 400px;

}

.center{

background: yellow;

}.right{

height: 400px;

background: blue;

display: table-cell;

}