页面布局水平居中行内元素块级元素 flex 布局绝对定位定宽绝对定位不定宽 left/right: 0 垂直居中

水平居中

行内元素

.parent {
    text-align: center;
}

块级元素

.son {
    margin: 0 auto;
}

flex 布局

.parent {
    display: flex;
    justify-content: center;
}

绝对定位定宽

.son {
    position: absolute;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}

绝对定位不定宽

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

left/right: 0

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;
}

垂直居中

行内元素

.parent {
    height: 高度;
}
.son {
    line-height: 高度;
}

table

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

flex

.parent {
    display: flex;
    align-items: center;
}

绝对定位定高

.son {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}

绝对定位不定高

.son {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

top/bottom: 0;

.son {
    position: absolute;
    height: 高度;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

水平垂直居中

行内元素

.parent {
    height: 150px;
    line-height: 150px;  /*行高的值与 height 相等 */
    text-align: center;
    font-size: 0;   /* 消除幽灵空白节点的 bug */
}
.son {
    /* display: inline-block; */  /* 如果是块级元素需改为行内或行内块级才生效 */
    vertical-align: middle;
}

table

.parent {
    height: 150px;
    width: 200px;
    display: table-cell;
    vertical-align: middle;
    /* text-align: center; */   /* 如果是行内元素就添加这个 */
}
.son {
    /* margin: 0 auto; */    /* 如果是块级元素就添加这个 */
    width: 100px;
    height: 50px;
}

flex

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

绝对定位

.parent {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 定宽高时用 margin-left:负自身宽度一半; margin-top:负自身高度一半; */
    transform: translate(-50%, -50%); 
}

top/bottom/left/right: 0

原理：当top、bottom为0时,margin-top&bottom设置auto的话会无限延伸占满空间并且平分；当left、right为0时,margin-left&right设置auto的话会无限延伸占满空间并且平分

.parent {
    position: relative;
}
.son {
    position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

视窗居中

原理：vh 为视口单位，视口即文档可视的部分，50vh 就是视口高度的50/100，设置50vh上边距

.son {
	  /* 0如果去掉，则会多出滚动条并且上下都是50vh的margin。如果去掉就给body加上overflow:hidden; */
    margin: 50vh auto 0;  
    transform: translateY(-50%);
}

直接在页面中设置一个固定大小的块水平垂直居中

<html>
  <body>
    <div class="cont"></div>
  </body>
</html>

// 一定要同时设置html和body的高度为100%,否则在垂直方向没有高度撑不起来!!!
<style>
html, body {   
  height: 100%;
}

// flex
body {
  display: flex;
  justify-contents: center;
  align-items: center;
}

// translate
body {
  position: relative;
}
.cont {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

三栏布局

高度已知，两边宽度固定中间自适应的三栏布局

圣杯布局与双飞翼布局

圣杯布局

<style>
.main {
    padding-left: 200px;
    padding-right: 150px;
}
.column {
    float: left;
}
.center {
    width: 100%;
  	background: red;
}
.left {
    width: 200px;
    background: green;
    margin-left: -100%;
    position: relative;
    left: -200px;
}
.right {
    width: 150px;
    background: blue;
    margin-right: -150px;
}
</style>
<div class="main">
    <div class="center column">center</div>
    <div class="left column">left</div>
    <div class="right column">right</div>
</div>

双飞翼布局

<style>
.column {
    float: left;
}
.center {
    width: 100%;
}
.inner {
    margin-left: 200px;
    margin-right: 150px;
  	background: red;
}
.left {
    width: 200px;
    margin-left: -100%;
  	background: green;
}
.right {
    width: 150px;
    margin-left: -150px;
  	background: blue;
}
</style>
<div class="center column">
    <div class="inner">center</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>

浮动

<div class="main">
 	<div class="left"></div>    // 浮动的元素写在前面
  <div class="right"></div>
  <div class="center"></div>
</div> 
<style>
  .main {
    width: 100%;
  }
  .main::after {   // 清除浮动
    content: '';
    display: block;
    clear: both;
  }
  .left {
    float: left;
    width: 300px;
    height: 100px;
    background-color: gray;
  } 
  .center {
    height: 100px;
    margin-left: 300px;  // 这两个属性必须得加，不加的话，如果中间元素内容过多会溢出
    margin-right: 300px;
    background-color: blue;
  }
  .right {
    float: right;
    width: 300px;
    height: 100px;
    background-color: red;
  } 
</style>

position布局

<div class="main">
  <div class="left">1</div>
  <div class="center">222</div>
  <div class="right">3</div>
</div>
<style>
  .main {
    position: relative;
    width: 100%;
  }

  .left {
    position: absolute;
    left: 0;
    width: 300px;
    height: 100px;
    background-color: gray;
  }

  .center {
    position: absolute;
    left: 300px;
    right: 300px;
    height: 100px;
    background-color: blue;
  }

  .right {
    position: absolute;
    right: 0;
    width: 300px;
    height: 100px;
    background-color: red;
  }
</style>

flex布局

阮一峰 flex 布局教程

父元素属性

属性名	属性值	备注
display	flex	定义了一个 flex 容器，它的直接子元素会接受这个 flex 环境
flex-direction	row ( 默认 )，row-reverse，column，column-reverse	决定主轴的方向
flex-wrap	nowrap，wrap，wrap-reverse	如果一条轴线排不下，如何换行
flex-flow	[flex-direction]，[flex-wrap]	是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`
justify-content	flex-start，flex-end，center，space-between，space-around	子元素在主轴方向上的对齐方式(当flex-direction为column是就不是横轴了)
align-items	flex-start，flex-end，center，baseline，stretch	子元素在交叉轴方向上的对齐方式(当flex-direction为column是就不是纵轴了)

子元素属性

属性名	属性值	备注
order	[int]	默认情况下 flex order 会按照书写顺序呈现，可以通过 order 属性改变，数值小的在前面，还可以是负数。默认为0
flex-grow	[number]	扩展比率，根据子元素所设置的扩展因子作为比率来分配剩余空间
flex-shrink	[number]	收缩比率，根据子元素所设置的收缩因子作为比率来收缩空间
flex-basis	[length], auto	伸缩基准值
align-self	auto,flex-start,flex-end,center,baseline,stretch	子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器 align-items 的设置

<div class="main">
  <div class="left">1</div>
  <div class="center">222</div>
  <div class="right">3</div>
</div>
<style>
  .main {
    width: 100%;
    display: flex;
  }

  .left {
    width: 300px;
    height: 100px;
    background-color: gray;
  }

  .center {
    flex: 1;  // 必写，自动获取剩余空间
    height: 100px;
    background-color: blue;
  }

  .right {
    width: 300px;
    height: 100px;
    background-color: red;
  }
</style>

表格布局

<div class="main">
  <div class="left">1</div>
  <div class="center">222</div>
  <div class="right">3</div>
</div>
<style>
  .main {
    width: 100%;
    display: table;
  }
  .left {
    display: table-cell;
    width: 300px;
    height: 100px;
    background-color: gray;
  }
  .center {
    display: table-cell;
    height: 100px;
    background-color: blue;
  }
  .right {
    display: table-cell;
    width: 300px;
    height: 100px;
    background-color: red;
  }
</style>

网格布局

阮一峰网格布局教程

<div class="main">
  <div class="left">1</div>
  <div class="center">222</div>
  <div class="right">3</div>
</div>
<style>
  .main {
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
  }
  .left {
    background-color: gray;
  }
  .center {
    background-color: blue;
  }
  .right {
    background-color: red;
  }
</style>

优缺点

1、float 布局是现在用的比较多的布局很多门户网站目前使用这个布局方式，使用的时候只需要注意一定要清除浮动

优点：兼容性强
缺点：因为脱离了文档流，得清除浮动

2、position 布局只是根据定位属性去直接设置元素位置，不太适合用做页面布局

优点：快捷，不容易出问题
缺点：因为脱离了文档流，子元素也必须脱离文档流，有效性/可使用性比较差

3、table 布局使用起来方便，兼容性也不存在问题，不利于搜索引擎抓取信息

优点：兼容性强
缺点：高度保持一致了

4、flex 布局比较强大，但是存在 IE 兼容性问题，只能 IE9 以上支持

优点：比 float 和 position 完美
缺点：只能兼容到 ie9 以上

5、grid 布局很强大，但是兼容性很差

优点：强大
缺点：兼容性差

拓展

去掉高度已知，哪个不再适用？

flex 和 table 布局通用其他布局不行，中间内容高度增加，两边不会动

变种

上下高度固定，中间自适应

1 css vh calc

<div class="top-center-bottom">
  <div class="top"></div>
  <div class="center"></div>
  <div class="bottom"></div>
</div>

<style>
  body {
    margin: 0;
    padding: 0;
  }
  .top-center-bottom {
    height: 100vh;
  }
  .top {
    height: 100px;
    background-color: red;
  }
  .center {
    height: calc(100vh - 200px);
    background-color: yellow;
  }
  .bottom {
    height: 100px;
    background-color: red;
  }
</style>

2 position

<div class="top-center-bottom">
  <div class="top"></div>
  <div class="center"></div>
  <div class="bottom"></div>
</div>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .top-center-bottom {
    height: 100vh;
    position: relative;
    width: 100%;
  }
  .top {
    position: absolute;
    top: 0;
    height: 100px;
    width: 100%;
    background-color: red;
  }
  .center {
    position: absolute;
    top: 100px;
    bottom: 100px;
    width: 100%;
    background-color: yellow;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
  }
</style>

3 flex

<div class="top-center-bottom">
  <div class="top"></div>
  <div class="center"></div>
  <div class="bottom"></div>
</div>

<style>
  body {
    margin: 0;
    padding: 0;
  }
  .top-center-bottom {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .top {
    height: 100px;
    background-color: gray;
  }
  .center {
    flex: 1;
    background-color: blue;
  }
  .bottom {
    height: 100px;
    background-color: red;
  }
</style>

干货!各种常见布局实现+知名网站实例分析

页面布局