水平居中
分子元素是行内元素还是快状元素。
1、行内元素：在父元素上设置
text-align：center；
2、定宽快状元素：在该元素上设置margin：auto；
3、不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
4、通用方案: flex布局，对父元素设置display:flex;justify-content:center;
垂直居中
1、父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
2、父元素一定，子元素为多行内联文本：设置父元素的display:table-cell，再设置vertical-align:middle;父亲是body也适用
//多行内联html
ddff
ddfs
ddsa
ddgg
//css
.d{
width: 100px;
height: 100px;
border: 1px solid;
}
.d {
display: table-cell;
vertical-align:middle;
}
多行内联垂直居中.png
多行内联，使用伪元素垂直居中
//css
.ghost-center {
position: relative;
width: 200px;
height: 300px;
border: 1px solid;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
//dom
dfdfdfsf
fdsffsaf
3、定宽块状元素:父元素设置
position：relative，设置子元素position:absolute，然后设置margin:auto;left: 0; right: 0;，若水平也居中则设置top :0 ; bottom: 0;
//html
f
//css
.d{
position: relative;
width: 100px;
height: 100px;
border: 1px solid;
}
.c{
width: 10px;
height: 10px;
position: absolute;
left: 0;//垂直居中
right: 0;
/*top :0;水平居中
bottom: 0;*/
margin: auto;
}
4、通用方案: flex布局，给父元素设置
{display:flex; align-items:center;}。
5、使用伪元素:brfore,:after实现水平垂直居中
//html
//css
.p{
position: relative;
}
.p:before{
content: '';
position: absolute;
top:50%;
left: 0;
width: 100%;
border: 1px solid #fc0;
}
.p:after{
content: '';
position: absolute;
top:0;
left: 50%;
height: 100%;
border: 1px solid #fc0;
}
图片.png
垂直水平居中（父亲是body也适用，其他方法在父亲是body的时候，垂直居中不适用）
1、元素宽高不定
父亲相对定位，孩子绝对定位，top，left各50%，然后相对自身移动一半
//dom
main
//css
#bd{
position: relative;
height: 100px;
width: 100px;
border: 1px solid;
}
.main{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
2、元素宽高一定
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
单栏布局
1、header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应.
对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。
//html
头部
内容
//css
.com{
max-width: 900px;
border:1px solid;
margin: auto;
}
2、header、footer宽度相同且为浏览器宽度width:100%;，但其内容与content宽度相同。
//html
头部内容
内容
//css
.com{
max-width: 900px;//浏览器宽度小于900px，自适应
border:1px solid;
margin: auto;
}
#header,#footer{
width:100%;
border:1px solid;
}
二栏&三栏布局
三栏布局去掉一栏可看成二栏布局
1、float+margin
原理：两侧边栏左右浮动，中栏间主给左右腾出边距，不设置中间宽度即可实现宽度自适应。
//css
.sub{
width: 100px;
float: left;
background: red;
}
.extra{
width: 200px;
float: right;
background: red;
}
.main{
margin-left: 100px;
margin-right: 200px;
background: green;
}
//html
sub
extra
main
注意，
- dom中左右侧边栏的书写要在主栏之前，否则不在一行上。float浮动脱离文档流。
- 这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。
- 去掉任意一个侧边栏，可变成两栏布局
2、 position+margin
原理说明左右侧边栏使用绝对定位，left,right设为0，设置top：0，主板设置边距腾出侧边栏的宽度。
//css