这篇文章会介绍CSS中大部分布局方式以及技巧，包括但不限于浮动、定位、flex、grid。 flex布局推荐阮一峰的文章Flex 布局教程：语法篇以及CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程) grid布局推荐CSS-Tricks的文章A Complete Guide to Grid，以及中文翻译CSS Grid 布局完全指南(图解 Grid 详细教程)
居中
水平居中
先来看最常用的一种，利用margin属性设置外边距，当要居中当元素是display:block时可以用这种方法。
<div class="container">
<div class="content"></div>
</div>
<style>
.content {
width: 200px;
height: 200px;
background-color: #000;
margin: 0 auto;
}
</style>
使用text-align,将元素当成文字直接居中。当要居中元素是inline或者是inline-block时可以在元素的父容器上使用。
<div class="container">
<span class="content">文字内容</span>
</div>
<style>
.container {
text-align: center;
}
</style>
<div class="container">
<a href="#" class="content">链接</a>
<a href="#" class="content">链接</a>
<a href="#" class="content">链接</a>
</div>
<style>
.container {
text-align: center;
}
.content {
display: inline-block;
}
</style>
利用定位来居中元素。绝对定位元素可以通过这种方式来居中,让定位的元素据左边50%父容器的距离，然后再让向左移动本身50%的距离。
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
position: relative;
}
.content {
position: absolute;
width: 200px;
height: 200px;
background-color: #000;
left: 50%;
transform: translateX(-50%);
}
</style>
使用flex布局来居中。
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
display: flex;
justify-content: center;
}
.content {
width: 200px;
height: 200px;
background-color: #000;
}
</style>
使用grid布局来居中，但是只为实现单个元素居中不推荐这种写法
<div class="container">
<div></div>
<div class="content"></div>
<div></div>
</div>
<style>
.container {
display: grid;
grid-template-columns: auto 200px auto;
grid-template-rows: 200px;
}
.content {
background-color: #f40;
}
</style>
使用grid布局的第二种居中方法，类似于flex
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
display: grid;
justify-content: center;
grid-template-columns: 200px;
grid-template-rows: 200px;
}
</style>
垂直居中
利用定位来实现，和水平居中的原理一致
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
height: 640px;
background-color: gray;
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 200px;
height: 200px;
background-color: #fff;
}
</style>
同时利用定位和外边距实现，让子元素的top和bottom的值保持相同，然后设置margin: auto;
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
height: 640px;
background-color: gray;
position: relative;
}
.content {
width: 200px;
height: 200px;
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
</style>
使用flex布局来进行垂直居中
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
height: 640px;
background-color: gray;
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
width: 200px;
height: 200px;
background-color: #fff;
}
</style>
使用grid布局来进行垂直居中
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
height: 640px;
background-color: gray;
display: grid;
grid-template-columns: 200px;
grid-template-rows: 200px;
align-content: center;
}
.content {
width: 200px;
height: 200px;
background-color: #fff;
}
</style>
使用line-height对文字进行居中
<div class="container">
500
</div>
<style>
.container {
height: 640px;
background-color: gray;
line-height: 640px;
}
</style>
三栏布局的实现（左右固定宽度，中间自适应）
为了展示方便，在这里我们暂定左右两栏宽200像素，中间自适应，高度统一为500像素，但在实际开发中，高度应该由内容撑开，而不是我们定义。
最传统的浮动布局，左边左浮动，右边右浮动
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</div>
<style>
.left {
width: 200px;
height: 500px;
background-color: red;
float: left;
}
.right {
width: 200px;
height: 500px;
background-color: red;
float: right;
}
.content {
padding: 0 200px;
height: 500px;
background-color: yellow;
}
圣杯布局，浮动布局的一种优化，把展示主要内容的中间部分在html结构中放在最前面，然后全部浮动，再通过margin-top: -100% 调整左边栏的位置，通过margin-top: -200px调整右边栏的位置，然后给主要的中间部分设置paddng
<div class="container">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.left {
width: 200px;
height: 500px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 500px;
background-color: red;
float: left;
margin-left: -200px;
}
.content {
padding: 0 200px;
height: 500px;
width: 100%;
background-color: yellow;
float: left;
box-sizing: border-box;
}
</style>
flex布局，非常方便的实现
<div class="container">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
<style>
.container {
display: flex;
}
.left {
width: 200px;
height: 500px;
background-color: red;
}
.right {
width: 200px;
height: 500px;
background-color: red;
}
.content {
height: 500px;
width: 100%;
background-color: yellow;
}
</style>
grid布局
<div class="container">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 500px;
}
.left {
background-color: red;
}
.right {
background-color: red;
}
.content {
background-color: yellow;
}
</style>
总结
通过基本布局技巧以及三栏布局的实现，我们可以明显的感觉出flex和grid布局的强大实力，在caniuse.com中也可以看到现在的浏览器对这两种布局的支持基本上都实现了。在掌握浮动 、定位这些基本布局技巧的同时，flex和grid也是现在的前端工程师必须要掌握的技能了。
