优点：兼容性好；
不足：需要同时设置子元素和父元素
.parent{width: 500px;height: 200px;background: red;text-align: center;}.child{display: inline-block;width: 300px;height: 100px;background: blue;}子元素 margin:0 auto;优点：兼容性好
缺点：需要指定宽度
.parent{width: 500px;height: 400px;background: red;}.child{margin: 0 auto;width: 300px;height: 100px;background: blue;}父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半优点：兼容性好
缺点：需要知道子元素的宽度
.parent {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: red;}.child {
position: absolute;
top: 0;
left: 50%;
margin-left: -150px;
width: 300px;
height: 100px;
background: blue;}父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);优点：不需要知道子元素的宽度
缺点：兼容性差 （新时代的你们，现在新的浏览器支持了，放心用了）
.parent {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: red;}.child {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
width: 300px;
height: 100px;
background: blue;}弹性盒子：父元素：display:flex;justify-content:center;优点：简单
缺点：兼容性差 （新时代的你们，现在新的浏览器支持了，放心用了）
.parent {
display: flex;
justify-content: center;
width: 500px;
height: 400px;
background: red;}.child {
width: 300px;
height: 100px;
background: blue;}1.2 垂直居中vertical-align:center;.parent {
width: 500px;
height: 400px;
background: red;
display: table-cell;
vertical-align: middle;}.child {
width: 300px;
height: 100px;
background: blue;}line-height.parent {
width: 500px;
height: 400px;
background: red;
line-height: 400px;}.child {
width: 300px;
height: 100px;
background: blue;
display: inline-block;
vertical-align: middle;}父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);.parent {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: red;}.child {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 300px;
height: 100px;
background: blue;}父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;.parent {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: red;}.child {
position: absolute;
top: 50%;
left: 0;
margin-top: -50px;
width: 300px;
height: 100px;
background: blue;}父元素：display:flex;align-items:center;.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
align-items: center;}.child {
width: 300px;
height: 100px;
background: blue;}1.3 水平垂直居中父元素：display:table-cell;vertical-align:middle;text-align:center;子元素；display:inline-block;.parent {
width: 500px;
height: 400px;
background: red;
display: table-cell;
vertical-align: middle;
text-align: center;}.child {
width: 300px;
height: 100px;
background: blue;
display: inline-block;}父元素：position:relative;子元素：position:absolute?50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者 transform:translate(-50%,-50%);.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
left: 0;
right: 0;}.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);}父元素{display:flex;justify-content:center;align-items:center;}.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;}.child {
width: 300px;
height: 100px;
background: blue;}2.多列布局2.1 左侧定宽，右侧自适应left{float:left;width:100px;} .right{margin-left:100px;}
leftright
* {
margin: 0;
padding: 0;}.left {
height: 400px;
width: 300px;
background: red;
float: left;}.right {
height: 400px;
margin-left: 300px;
background: blue;}left right
* {
margin: 0;
padding: 0;}.left {
width: 300px;
height: 400px;
float: left;
background: red;}.right-fix {
width: 100%;
margin-left: -300px;
float: right;}.right {
margin-left: 300px;
height: 400px;
background: blue;}.left{width:宽度值;float:left;} .right{overflow:hidden;}
left right
* {
margin: 0;
padding: 0;}.left {
width: 300px;
height: 400px;
float: left;
background: red;}.right {
height: 400px;
background: blue;
overflow: hidden;}table 实现
left right
* {
margin: 0;
padding: 0;}.parent {
display: table;
table-layout: fixed;
width: 100%;}.left {
width: 300px;
height: 400px;
background: red;
display: table-cell;}.right {
height: 400px;
background: blue;
display: table-cell;}flex 实现
left right
* {
margin: 0;
padding: 0;}.parent {
display: flex;
width: 100%;}.left {
width: 300px;
height: 400px;
background: red;}.right {
height: 400px;
background: blue;
flex: 1;}2.2 右侧定宽左侧自适应float margin 实现
left right
* {
margin: 0;
padding: 0;}.left {
width: 100%;
height: 400px;
background: red;
float: left;
margin-right: -300px;}.right {
height: 400px;
background: blue;
width: 300px;
float: right;}table 实现
left right
* {
margin: 0;
padding: 0;}.parent {
width: 100%;
display: table;
table-layout: fixed;}.left {
width: 100%;
height: 400px;
background: red;
display: table-cell;}.right {
height: 400px;
background: blue;
width: 300px;
display: table-cell;}flex 实现
left right
* {
margin: 0;
padding: 0;}.parent {
width: 100%;
display: flex;}.left {
flex: 1;
background: red;
display: table-cell;}.right {
height: 400px;
background: blue;
width: 300px;}2.3 左边两列定宽，右侧自适应float margin 实现
left center right
* {
margin: 0;
padding: 0;}.parent {
width: 100%;}.left,.center {
background: red;
float: left;
width: 300px;
height: 400px;}.center {
background: yellow;}.right {
height: 400px;
background: blue;
margin-left: 600px;}float overflow 实现
left center right
* {
margin: 0;
padding: 0;}.parent {
width: 100%;}.left,.center {
background: red;
float: left;
width: 300px;
height: 400px;}.center {
background: yellow;}.right {
height: 400px;
background: blue;
overflow: hidden;}table 实现
left center right
*{
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;
}
