水平居中
- 行内元素：text-align: center;
- 块级元素：设置宽度然后margin:0 auto
- 多个块级元素：父元素设置 text-align: center;，对子元素设置 display: inline-block;或使用 flex 布局
垂直居中
行内元素
单行：
- 设置上下 pandding 相等
- 设置 line-height 和 height 相等
多行：
- 设置上下 pandding 相等
- 设置 display: table-cell; 和 vertical-align: middle
- 使用 flex 布局
块级元素：
父元素相对定位
子元素定高，子元素绝对定位 top:50%;再负 margin-top 把子元素往移一半的高度
未知子元素高，子元素绝对定位 top: 50%; transform: translateY(-50%)
flex布局，父元素justify-content: center;
两栏布局
左列定宽，右列自适应
- float + margin
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
#left {
float: left;
width: 100px;
height: 800px;
background-color: red;
}
#right {
margin-left: 100px;
height: 500px;
background-color: blue;
}
2.float+overflow
right触发bfc实现自适应
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
#left {
float: left;
width: 100px;
height: 800px;
background-color: red;
}
#right {
height: 500px;
background-color: blue;
overflow: hidden;
}
3.flex
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
#parent{
height: 800px;
display: flex;
}
#left {
width: 100px;
background-color: red;
}
#right {
flex: 1;
background-color: blue;
}
三栏布局
两列定宽，中间自适应
1.圣杯
将外层包裹设置padding，再设置左右列的position属性分别左右移动到空出的padding部分，使中间列文字不被遮挡。
<div id="parent">
<div id="center">中间自适应</div>
<div id="left">左列定宽</div>
<div id="right">右列定宽</div>
</div>
#parent {
padding-left: 100px;
padding-right: 200px;
}
#left {
float: left;
position: relative;
left: -100px;
width: 100px;
height: 500px;
margin-left: -100%;
background-color: red;
}
#center {
float: left;
width: 100%;
height: 480px;
background-color: green;
}
#right {
float: left;
position: relative;
right: -200px;
width: 200px;
height: 500px;
margin-left: -200px;
background-color: blue;
}
2.双飞翼
与圣杯类似，只是在中间多套了一个元素，利用内套center的margin与左右列隔开。与圣杯相比，少了相对定位、padding属性的设置，更加简洁。
<div id="parent">
<div id="center-box">
<div id="center">中间自适应</div>
</div>
<div id="left">左列定宽</div>
<div id="right">右列定宽</div>
</div>
#left {
float: left;
width: 100px;
height: 500px;
margin-left: -100%;
background-color: red;
}
#center-box{
float: left;
width: 100%;
height: 300px;
}
#center{
height: 480px;
margin: 0 200px 0 100px;
background-color: green;
}
#right {
float: left;
width: 200px;
height: 500px;
margin-left: -200px;
background-color: blue;
}
3.position
左右两列脱离文档流，父元素高度不一定撑得起来，对下面盒子的排布有影响
#parent {
position: relative;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 500px;
background-color: red;
}
#center {
height: 500px;
margin-left: 100px;
margin-right: 200px;
background-color:green;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 500px;
background-color:blue;
}
4.flex
<div id="parent">
<div id="left">左列定宽</div>
<div id="center">中间自适应</div>
<div id="right">右列定宽</div>
</div>
#parent {
height: 500px;
display: flex;
}
#left {
width: 100px;
background-color: red;
}
#center {
flex: 1;
background-color: green;
}
#right {
width: 200px;
background-color:blue;
}
