水平居中
分子元素是行内元素还是快状元素。
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
<div class="d">
<span>ddff</span>
<span>ddfs</span>
<span>ddsa</span>
<span>ddgg</span>
</div>
//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
<div class="ghost-center">
<p>dfdfdfsf</p>
<p>fdsffsaf</p>
</div>
3、定宽块状元素:父元素设置
position：relative，设置子元素position:absolute，然后设置margin:auto;left: 0; right: 0;，若水平也居中则设置top :0 ; bottom: 0;
//html
<div class="d">
<div class="c">f</div>
</div>
//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
<div class="p"></div>
//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
<div id="bd">
<div class="main">main</div>
</div>
//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
<header class="com">头部</header>
<div id="content" class="com">内容</div>
<footer class="com">脚步</footer>
//css
.com{
max-width: 900px;
border:1px solid;
margin: auto;
}
2、header、footer宽度相同且为浏览器宽度width:100%;，但其内容与content宽度相同。
//html
<header id="header">
<div class="com">头部内容</div>
</header>
<div id="content" class="com">内容</div>
<footer id="footer">
<div class="com">脚部内容</div>
</footer>
//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
<div id="content">
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="main">main</div>
</div>
注意，
- dom中左右侧边栏的书写要在主栏之前，否则不在一行上。float浮动脱离文档流。
- 这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。
-
去掉任意一个侧边栏，可变成两栏布局
2、 position+margin
原理说明左右侧边栏使用绝对定位，left,right设为0，设置top：0，主板设置边距腾出侧边栏的宽度。
//css
<style>
#content{
position: relative;
}
.sub, .extra {
position: absolute;
top: 0;
width: 200px;
background-color: red;
}
.sub {
left: 0;
}
.extra {
right: 0;
}
.main {
margin: 0 200px;
background: green;
}
//html
<div id="content">
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>
</div>
}
注意，当左右边栏设置top：0时，不需要让主栏写在最后，但是没有该设置时，要注意顺序，同float+margin
- 与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。
- 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。
3、圣杯布局（float+负margin+padding+position）
原理说明：div容器包裹主板、左、右（dom是此顺序）三栏，三者均float：left。主板宽度100%，左栏margin：-100%（相对于父框），此时左栏左侧和main对齐，然后左栏设置position：relative，负left左栏宽度。右栏设置负margin：右栏宽度，此时右栏跑到上册，右对齐main，然后设置position：relative，负right：右栏宽度。设置父边框padding，腾出左右位置。
dom
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
css
.main {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
}
#bd {
padding: 0 230px 0 190px;
}
- DOM元素的书写顺序不得更改。
- 当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置父元素的min-width属性或使用双飞翼布局避免问题。
使用flex进行圣杯布局,不会出现浏览器宽度不够，布局破坏的现象
//dom
<div id="bd">
<div class="main">main</div>
<div class="sub">l</div>
<div class="extra">r</div>
</div>
//css
#bd{
display: flex;
}
.main{
flex:1;
background: red;
}
.sub,.extra{
flex:0 0 200px;
background: green;
}
.sub{
order: -1;
}
4、双飞翼布局（float+负margin+margin）
原理说明：双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤
布局步骤:
1、三者都设置向左浮动。
2、 设置main-wrap宽度为100%，设置两个侧栏的宽度。
3、设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
4、设置main的margin值给左右两个子面板留出空间。
//dom
<div id="main-wrap" class="column">
<div id="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
//css
.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。
网友评论