对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。
本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为如下几类：
- 水平居中
- 垂直居中
- 水平垂直居中
- 两列布局
- 三列布局
- 等分布局
- Sticky Footer布局
- 全屏布局
这些内容也正是本篇文章的目录。
![图片[1]-总结了 42 种前端常用布局方案-山海云端论坛](https://www.shserve.cn/wp-content/uploads/2024/03/20240312111906124-image.png)
实现水平布局比较简单，方法也比较多，这里总结了7种常用的布局方法，其公共的CSS代码如下所示：.parent { background: #ff8787; }
.child { height: 300px; width: 300px; background: #e599f7; }
其 HTML 结构也是固定的，就是一个父级，其宽度继承了 <body> 的宽度，还有一个子级，这里是固定的300px*300px，代码如下：<div class="parent">
<div class="child"></div>
</div>
1. 使用text-align属性
若元素为行内块级元素，也就是 display: inline-block 的元素，可以通过为其父元素设置t ext-align: center 实现水平居中。实现的CSS代码如下：.parent {
/* 对于子级为 display: inline-block; 可以通过 text-align: center; 实现水平居中 */
text-align: center;
}
.child {
display: inline-block;
}
2. 定宽块级元素水平居中(方法一)
对于定宽的的块级元素实现水平居中，最简单的一种方式就是 margin: 0 auto;，但是值得注意的是一定需要设置宽度。实现 CSS 代码如下：.child {
/* 对于定宽的子元素，直接 margin:0 auto; 即可实现水平居中 */
margin: 0 auto;
}
3. 定宽块级元素水平居中(方法二)
对于开启定位的元素，可以通过 left 属性 和 margin 实现。实现CSS代码如下：.child {
/* 开启定位 */
position: relative;
left: 50%;
/* margin-left 为 负的宽度的一半 */
margin-left: -150px;
}
4. 定宽块级元素水平居中(方法三)
当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。
实现 CSS 代码如下：.parent {
position: relative;
height: 300px;
}
.child {
/* 开启定位 父相子绝 */
position: absolute;
/* 水平拉满屏幕 */
left: 0;
right: 0;
width: 300px;
/* 拉满屏幕之后设置宽度，最后通过 margin 实现水平居中 */
margin: auto;
}
5. 定宽块级元素水平居中(方法四)
当元素开启决定定位或者固定定位时， left 属性和 transform 属性即可实现水平居中。
实现CSS代码如下：.parent {
position: relative;
}
.child {
/* 开启定位 */
position: absolute;
/* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */
left: 50%;
transform: translateX(-50%);
}
6. Flex方案
通过 Flex 可以有很多方式实现这个居中布局的效果。
实现 CSS 代码如下.parent {
height: 300px;
/* 开启 Flex 布局 */
display: flex;
/* 通过 justify-content 属性实现居中 */
justify-content: center;
}
.child {
/* 或者 子元素 margin: auto*/
margin: auto;
}
7. Grid方案
通过Grid实现居中布局比通过Flex实现的方式更多一些。
实现CSS代码如下：.parent {
height: 300px;
/* 开启 Grid 布局 */
display: grid;
/* 方法一 */
justify-items: center;
/* 方法二 */
justify-content: center;
}
.child {
/* 方法三 子元素 margin: auto*/
margin: auto;
}
以上就是水平居中布局常用的几种方式。
垂直居中
实现垂直布局也是比较简单的，方法也比较多，这里总结了6种常用的布局方法，其公共的 CSS 代码如下所示：.parent {
height: 500px;
width: 300px;
margin: 0 auto;
background-color: #ff8787;
}
.child {
width: 300px;
height: 300px;
background-color: #91a7ff;
}
其 HTML 结构也是固定的，就是一个父级包裹一个子级，这里的子级是固定的300px*300px，代码如下：<div class="parent">
<div class="child"></div>
</div>
1. 行内块级元素垂直居中
若元素是行内块级元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并让父元素行高等同于高度。
实现CSS代码如下：.parent {
/* 为父级容器设置行高 */
line-height: 500px;
}
.child {
/* 将子级元素设置为 inline-block 元素 */
display: inline-block;
/* 通过 vertical-align: middle; 实现居中 */
vertical-align: middle;
}
2. 定位方式实现(方法一)
第一种通过定位的方式实现就比较简单，实际就是通过top: 50%; margin-top: 等于负的高度的一半就可以实现垂直居中。
实现CSS代码如下：.parent {
/* 为父级容器开启相对定位 */
position: relative;
}
.child {
position: absolute;
top: 50%;
/* margin-top: 等于负高度的一半 */
margin-top: -150px;
}
3. 定位方式实现(方法二)
第二种通过定位的方式实现实现思路：top 和 bottom 将子元素拉伸至100%，设置指定的高度，通过margin:auto;即可实现垂直居中。
实现CSS代码如下：.parent {
/* 为父级容器开启相对定位 */
position: relative;
}
.child {
height: 300px;
position: absolute;
/* 垂直拉满 */
top: 0;
bottom: 0;
/* margin: auto 即可实现 */
margin: auto;
}
4. 定位方式实现(方法三)
第三种通过定位的方式就比较灵活，适用于多种场合，使用 top 配合 tansform 即可。
实现CSS代码如下：.parent {
/* 为父级容器开启相对定位 */
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
5. Flex方案
通过 Flex 可以有很多方式实现这个垂直居中布局的效果。
实现CSS代码如下：.parent {
/* 开启 flex 布局 */
display: flex;
/* 方法一 */
/* align-items: center; */
}
.child {
/* 方法二 */
margin: auto;
}
通过 Flex 布局实现不仅仅只有上面两种，这里只介绍最简单的方式。
6. Grid方案
通过 Grid 实现居中布局比通过 Flex 实现的方式更多一些。
实现CSS代码如下：.parent {
display: grid;
/* 方法一 */
/* align-items: center; */
/* 方法二 */
/* align-content: center; */
}
.child {
/* 方法三 */
/* margin: auto; */
/* 方法四 */
align-self: center;
}
以上就是垂直居中布局常用的几种方式。
水平垂直居中
实现水平垂直布局基本就是将上面几种方式结合使用，这里总结了7种常用的布局方法，其公共的 CSS 代码如下所示：body {
margin: 0;
}
.parent {
height: 500px;
width: 500px;
background-color: #eebefa;
margin: 0 auto;
}
.child {
height: 300px;
width: 300px;
background-color: #f783ac;
}
其 HTML 结构也是固定的，就是一个父级包裹一个子级，这里的子级是固定的300px*300px，代码如下：<div class="parent">
<div class="child"></div>
</div>
![表情[qiudale]-山海云端论坛](https://www.shserve.cn/wp-content/themes/Shanhai/img/smilies/qiudale.gif)
我也是买了领不了、
暂无评论内容