布局是CSS中一个重要部分，下面总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现）。
一、居中方式
水平居中
水平居中对于子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案是不同。
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;
垂直居中
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案也是不同的。
父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:absolute并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
二、单列布局
特征：定宽、水平居中
常见的单列布局有两种：
· 一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
· 一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。
对于第一种，对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。
三、实现多列布局的几种方式
实现多列布局的方式有：
- 使用BFC隐藏属性
- float + margin
- absolute + margin
- 圣杯布局
- 双飞翼布局
- flex布局
下面所举例子（以三栏布局为例）的DOM文档内容如下：
<!-- 三栏布局 -->
<!-- 这里要注意DOM的书写顺序问题。 -->
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<article class="main"></article>
1、使用BFC隐藏属性
在对需要自适应的元素BFC化，可以实现两列或三列布局
三列布局方式示例如下：
/*固定宽度*/
.aside1 {
float: left; /*给浮动元素设置margin-right使两栏之间有间隙*/
margin-right: 10px;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}
/*固定宽度*/
.aside2 {
float: right;
margin-left: 10px;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}
/*BFC化自适应宽度*/
.main {
overflow: hidden;
height: 100vh;
background-color: lightpink;
}
使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题。如果将aside2与article交换位置，那么aside2元素会被挤到article元素之下，无法实现三栏自适应布局。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。
2、float + margin
在自适应宽度的元素上设置margin值，margin的值大于或等于固定宽度的值即可。实现思路与使用BFC隐藏属性差不多。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。
CSS样式：
.aside1 {
float: left;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}
.main {
margin-left: 110px;
margin-right: 110px;
height: 100vh;
background-color: lightpink;
}
.aside2 {
float: right;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}
3、absolute + margin
使用position: absolute时，DOM元素顺序并不重要。给左右两栏定宽，主内容自适应宽度。缺点：侧边栏元素脱离文档流。优点：article元素可先加载。
CSS样式：
.aside1 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}
.aside2 {
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 100vh;
background-color: lightsalmon;
}
.main {
margin: 0 110px;
height: 100vh;
background-color: lightpink;
}
4、圣杯布局
圣杯布局叫float + 负margin + relative更容易理解一些，它的实现思路如下：
- 两栏和自适应元素都设置同一方向的浮动(如float: left)
- 父元素设置左右padding为左右边栏的宽度。
- 自适应元素设置宽度为100%
- 左边栏margin-left为负100%，再设置relative，最后通过left属性偏移负的自身宽度。
- 右边栏margin-left为负自身宽度，再设置relative，最后通过right属性偏移负的自身宽度。
而且，该布局方式与其他布局方式有一个明显的不同：它需要有一个父元素。缺点：宽度小于两栏宽度时，元素会因为宽度不足而掉下去。
5、双飞翼布局
双飞翼布局与圣杯布局相似。只不过少了relative与left, right的步骤和共同父元素，主内容元素多了层父元素。实现思路如下：
-
- 两栏和自适应元素都设置同一方向的浮动(如float: left)
- main元素设置左右margin值，值为左右两栏的宽度。main父元素设置宽度为100%
- 左边栏margin-left为负100%
- 右边栏margin-left为负自身宽度
6、flex布局
flex布局还可以称之为弹性布局，它可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。
弹性布局的使用方式如下：
① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；
② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
③ display:flex; 容器添加弹性布局后，显示为块级元素；
display:inline-flex; 容器添加弹性布局后，显示为行级元素；
④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。
虽然 在需要缩放，对齐和重新排序元素的情况下使用flex布局非常方便，但以下情况应该尽量避免使用 Flex 布局：
1、整体页面布局
2、完全支持旧浏览器的网站
原文地址：https://www.cnblogs.com/web12/p/9936500.html