一.水平居中
(1)直接父集设置text-align:center;
.parent{text-align:center;}
<div class="parent">
<div class="child">DEMO</div>
</div>优点：兼容性好，甚至可以兼容ie6、ie7
缺点：child里的文字也会水平居中，可以在.child添加text-align:left;还原
（2）使用定位absolute+transform
.parent {position:relative;}
.child {position:absolute;left:50%;transform:translateX(-50%);}
优点：居中元素不会对其他的产生影响
缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
（3）弹性布局
.parent {display:flex;}
.child {margin:0 auto;}
另一种写法
.parent {display:flex;justify-content:center;}
缺点：低版本浏览器(ie6 ie7 ie8)不支持
（4）表格
.child {display:table;margin:0 auto;}
缺点：不支持ie6、ie7,将div换成table
二.垂直居中
（1）表格table-cell+vertical-align
.parent {display:table-cell;vertical-align:middle;}
ie8以上均支持
（2）定位absolute+transform
.parent {position:relative;}
.child {position:absolute;top:50%;transform:translateY(-50%);}
缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
（3）弹性布局flex+align-items
.parent {display:flex;align-items:center;}
缺点：兼容性存在一定问题
三.水平垂直居中
（1）表格
.parent {text-align:center;display:table-cell;vertical-align:middle;}
.child {display:inline-block;}
优点：兼容性较好
（2）定位
.child {position:absolute;left:50%;top:50%;transform:tranplate(-50%,-50%);}
缺点：兼容性存在一定问题
（3）弹性布局
.parent {display:flex;justify-content:center;align-items:center;}
缺点：兼容性存在一定问题
四.多列布局 定宽+自适应
（1）浮动
<div class="parent clear-fix">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
.left {
float:left;
width:100px;
}
.right {
overflow:hidden;
}
.clear-fix::after {
content:"";
display: block;
clear:both;
}
另种写法（左边居中）
.left {
float:left;
width:100px;
}
缺点：记得清除浮动不支持ie6
（2）表格
.parent {
display:table;
width:100%;
table-layout:fixed;
}
.left {
width:100px;
}
.right,.left {
display:table-cell;
}
（3）弹性布局
.parent {
display:flex;
}
.left {
width:100px;
}
.right {
flex:1;
}
五.等分布局
（1）浮动
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
（2）弹性布局
.parent{
display: flex;
}
.column{
flex: 1;
}
.column+.column{
margin-left:20px;
}
六.rem布局（1套代码解决2端）
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 19.2 + 'px'
</script>
七.浮动布局(具体)
1.整体给宽高 margin：0 auto
2.局部给宽高 margin：0 auto
3.分别每个给宽高和浮动（有图片的话，则给图片设置display:block;margin:0 auto;）
.custom-list{
width:100%;
height:6rem;
margin-top:1rem;
margin:0 auto;
}
.custom-line{
width:17.2rem;
height:2.7rem;
margin:1rem auto 0 auto;
}
.custom-line>div {
width: 3.44rem;
height:100%;
float:left;
}
.pic{
width:1.5rem;
height:1.5rem;
display:block;
margin:0 auto;
}
在要浮动部位的父集上增加class="clear-fix"
.clear-fix::after {
content:"";
display: block;
clear:both;
}
<section class="custom-list">
<div class="subtitle">你就是帅</div>
<div class="custom-line clear-fix">
<div class="ms-left">
<div>
<img class="pic" src="" alt="">
</div>
<div class="custom-font">你</div>
</div>
<div class="ms-left">
<div>
<img class="pic" src="" alt="">
</div>
<div class="custom-font">就</div>
</div>
<div class="ms-right">
<div>
<img class="pic" src="" alt="">
</div>
<div class="custom-font">是</div>
</div>
<div class="ms-right">
<div>
<img class="pic" src="" alt="">
</div>
<div class="custom-font">帅</div>
</div>
<div class="ms-right">
<div>
<img class="pic" src="" alt="">
</div>
<div class="custom-font"></div>
</div>
</div>
</section>
八.不等宽高布局
<div class="free-line clear-fix ">
<div class="indicate"><img src="icon_1.png"><span>不等宽高布局</span></div>
<div class="free-arrow"><img src="next.png"></div>
</div>
.free-line {
margin-top: 1rem;
width: 17.2rem;
height: 2.49rem;
margin: 1rem auto 0 auto;
font-size: 0;
}
.free-line>div {
height: 100%;
display: inline-block;
vertical-align: top;
}
.indicate {
width: 3.07rem;
background-color: #fff;
color: #333;
position: relative;
}
.indicate>img {
width: 1rem;
height: 1rem;
position: absolute;
bottom: 40%;
left: 50%;
transform: translate(-50%,0);
}
.free-arrow {
width: 1.64rem;
position: relative;
height: 100%;
}
.free-arrow>img {
position: absolute;
width: 0.34rem;
height: 0.63rem;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
