1.单列布局

1.1 水平居中

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

• 优点：兼容性好；

• 不足：需要同时设置子元素和父元素

子元素 margin:0 auto;

• 优点：兼容性好

• 缺点：需要指定宽度

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

• 优点：兼容性好

• 缺点：需要知道子元素的宽度

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

• 优点：不需要知道子元素的宽度

• 缺点：兼容性差 （新时代的你们，现在新的浏览器支持了，放心用了）

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

• 优点：简单

• 缺点：兼容性差 （新时代的你们，现在新的浏览器支持了，放心用了）

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 实现

flex 实现

2.2 右侧定宽左侧自适应

float margin 实现

table 实现

flex 实现

2.3 左边两列定宽，右侧自适应

float margin 实现

float overflow 实现

table 实现

*{

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;

}