一、水平居中（使用text-align+inline-block）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
text-align:center;
background:red;
width:200px;
height:200px;
}
.child{
display:inline-block;
background:yellow;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>运行结果：
二、垂直居中（使用table-cell+vertical-align）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
display:table-cell;
vertical-align:middle;
background:red;
width:200px;
height:200px;
}
.child{
display:inline-block;
background:yellow;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
运行效果：
三、水平垂直居中（使用text-align+inline-block+table-cell+vetical-align）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
width:200px;
height:200px;
}
.child{
display:inline-block;
background:yellow;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
运行效果：
四、多列布局
（1）定宽+自适应（使用float+margin）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.left{
background-color:red;
width:100px;
float:left;
position:relative;
}
.rightfix{
background-color:blue;
float:right;
margin-left:-100px;
width:100%;
}
.right{
margin-left:120px;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="rightfix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
运行结果：
（2）两列定宽+一列自适应（使用float+overflow）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.left{
background-color:red;
}
.center{
background-color:yellow;
}
.left,.center{
width:100px;
float:left;
margin-right:20px;
}
.right{
overflow:hidden;
background-color:blue;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right"><p>right</p><p>right</p></div>
</body>
</html>
运行结果：
(3) 不定宽+自适应（使用float+overflow）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.left{
background-color:red;
float:left;
margin-right:20px;
}
.right{
background-color:blue;
overflow:hidden;
}
.left p{
width:200px;
}
</style>
</head>
<body>
<div class="left"><p>left</p></div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</body>
</html>
运行结果：
（4）两列不定宽+一列自适应（使用float+overflow）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.left,.center{
float:left;
margin-right:20px;
}
.left{
background-color:red;
}
.center{
background-color:yellow;
}
.right{
background-color:blue;
overflow:hidden;
}
.left p,.center p{
width:200px;
}
</style>
</head>
<body>
<div class="left"><p>left</p></div>
<div class="center"><p>center</p></div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</body>
</html>
运行结果：
（5）等分布局（使用float）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parentwrap{
width:960px;
overflow:hidden;
}
.parent{
margin-left:-20px;
overflow:hidden;
background-color:lightgray;
}
.child{
background-color:red;
width:25%;
height:100px;
float:left;
padding-left:20px;
box-sizing:border-box;
background-clip:content-box;
}
</style>
</head>
<body>
<div class="parentwrap">
<div class="parent">
<div class="child">part1</div>
<div class="child">part2</div>
<div class="child">part3</div>
<div class="child">part4</div>
</div>
</div>
</body>
</html>
运行结果：
（6）定宽+自适应+两块高度一样高