布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
/* div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。 */
.example-1{
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。 */
.example-2 {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
如果用flex实现，是这样的。
/*通过flex的主轴纵轴上子元素的对齐方式align-items、justify-content属性实现*/
.example-3 {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/**/
.example-4 {
display: flex;
width: 100%;
}
.example-4 .main{
margin: auto;
}
display
| 值 |描述|
|---|---|---|---|---|
|none|此元素不会被显示。|
|block |此元素将显示为块级元素，此元素前后会带有换行符。|
|inline |默认。此元素会被显示为内联元素，元素前后没有换行符。|
|inline-block |行内块元素。（CSS2.1 新增的值）|
|list-item| 此元素会作为列表显示。|
|run-in |此元素会根据上下文作为块级元素或内联元素显示。|
|table| 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。|
|inline-table|此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。|
|inherit|规定应该从父元素继承 display 属性的值。|
由display的属性引出各种布局
页面布局的几种方式
定位布局（position）
定位布局分为两种：绝对定位（absolute）和相对定位（relative），但是位置是写死的，很不灵活，一般只用在页面中一些需要固定的小标签上。浮动布局（float）
相对于普通文档流布局，浮动布局会脱离普通文档流，起初是为了解决图文信息中图片与文字冲突的问题，应用float后，就可以轻松实现文字环绕图像的效果。
float会带来一个问题，当父元素没有设定高度时，子元素浮动，父元素的高度坍塌为0，解决方法参考：
关于浮动元素float使其父元素高度塌陷的原因及解决方法弹性布局（flex）
弹性布局flex（Flexible Box），十分灵活，避免了传统css代码繁复的问题，可以快速实现垂直居中等效果。flex布局比较适合一维的，所以在页面中适合用来做局部的布局，如导航、菜单等。教程可参考：
Flex 布局教程：语法篇
Flex 布局教程：实例篇网格布局（grid）
grid是比较新的技术，相对于flex，grid可以实现二维布局，从下图可以看出，目前浏览器的支持性还不是太好，但是在未来一定会成为一个主要的布局方式。
参考教程：
Grid布局指南：https://www.jianshu.com/p/d183265a8dad
- Table布局
Table布局是比较早期的技术，现在基本已经不用，想了解的可以参考一下教程：
css table布局大法，解决你大部分居中、多列等高、左右布局的问题
总结
如果是面向客户，考虑到浏览器的兼容问题，还是用传统的display+position+float方式做整体布局，用flex做局部（导航、菜单等）的布局。如果是自己实践，不面向大众群体的话，可以多尝试flex+grid的方法。
适用方式、兼容性
CSS布局的发展历程：
参考资料：
Flex布局原理介绍：https://www.jianshu.com/p/c25a41f88705
弹性布局flex的那些坑，你踩过多少？：https://baijiahao.baidu.com/s?id=1606138910037135099&wfr=spider&for=pc
几张 GIF 动图让你看懂弹性盒模型（Flexbox）如何工作：https://yq.aliyun.com/articles/226495
