我总结了一份 CSS 常用的布局技巧

it2025-06-19 14

CSS 布局是永远逃不过的话题，我结合实际工作经验总结了这个布局技巧。目前内容还不是很多，我还在持续更新中。如果你想要更好的阅读体验，也可以在《前端小课》网站查看，有实际交互效果：

https://lefex.gitee.io/books/css-book/layout.html

水平垂直居中

让蓝色的方块在水平和垂直方向居中：

<div class="center-wrap"> <div class="logo"></div> </div> .center-wrap { position: relative; background-color: #1f2022; height: 200px; }

蓝色的方框水平与垂直方向上都垂直居中。

方式一、绝对定位（absolute），蓝色方块宽高已知：

.logo { position: absolute; width: 160px; height: 100px; top: 50%; left: 50%; margin-top: -50px; margin-left: -80px; background-color #5b83fd; }

方式二、绝对定位（absolute），蓝色方块宽高已知/未知均可：

.logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #5b83fd; }

方式三、flexbox（蓝色方块宽高无所谓，注意IE浏览器）：

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

从上面的可以衍生出水平居中的方案。

水平居中

让蓝色的方块在水平方向居中：

方式一、display: block + margin: 0 auto

适用于 display 为 block 的元素。如果元素脱离文档流，该方式将失效。

.logo { width: 160px; height: 100px; margin: 0 auto; background-color: #5b83fd; }

方式二、flexbox 布局，设置容器属性就行（注意IE浏览器）

.center-wrap { display: flex; justify-content: center; background-color: #282c34; height: 140px; }

方式三、使用 transform，对宽高无要求

对于脱离文档流的元素可通过下面这种方式实现。

.logo { position: absolute; padding: 10px; left: 50%; transform: translate(-50%, 0); background-color: #5b83fd; }

方式四、inline-block + text-align

display 需要设置为 inline-block，在父元素中设置 text-algin 让子元素进行对齐。

.content-wrap { position: relative; background-color: #282c34; height: 140px; text-align: center; } .logo { display: inline-block; background-color: #5b83fd; padding: 10px; }

两列（左边宽度固定、右边自适应）

这种效果在实际开发中经常用到，一定要牢固掌握。

方式一：左浮动定宽、右 margin-left

左边元素设置了宽度和 float-left，右边元素设置 margin-left 恰好是左边元素的宽度。

.content-wrap { background-color: #282c34; height: 100px; } .left, .right { height: 100%; } .left { float: left; width: 140px; background-color: #5b83fd; } .right { margin-left: 140px; background-color: #F7B500; }

方式二：左浮动定宽、右 overflow

.content-wrap { background-color: #282c34; height: 100px; } .left, .right { height: 100%; } .left { float: left; width: 140px; background-color: #5b83fd; } .right { overflow: hidden; background-color: #FA6400; }

方式三：flexbox

.content-wrap { display: flex; height: 100px; background-color: #282c34; } .left { height: 100%; width: 140px; background-color: #5b83fd; } .right { height: 100%; flex: 1; background-color: #6DD400; }

三列布局

<div class="content-wrap"> <div class="left">Left</div> <div class="mid">Mid</div> <div class="right">Right</div> </div>

方式一：左右两列宽度固定，右边自适应

这种可以借助于两列布局的思想，使用 float、overflow 和 flexbox 的方式均可实现。

overflow

.left { float: left; width: 140px; background-color: #5b83fd; } .mid { float: left; width: 100px; background-color: #FA6400; } .right { overflow: hidden; background-color: #F7B500; }

float

.left { float: left; width: 140px; background-color: #5b83fd; } .mid { float: left; width: 100px; background-color: #FA6400; } .right { margin-left: 240px; background-color: #F7B500; }

方式二、两边固定，中间自适应

注意 mid 是在最上面。

<div class="content-wrap"> <div class="mid-wrap"> <div class="mid2">Mid</div> </div> <div class="left2">Left</div> <div class="right2">Right</div> </div> .left, .right, .mid-wrap { height: 80%; float: left; } .left { width: 140px; background-color: #FA6400; margin-left: -100%; } .mid-wrap { height: 100%; width: 100%; background-color: #5b83fd; } .mid { background-color: #6DD400; margin-left: 140px; margin-right: 80px; height: 80%; } .right { width: 80px; background-color: #F7B500; margin-left: -80px; }

导航栏

导航栏一直「悬停」在最顶端。但凡是要悬停可视区域某一位置都可以使用 fixed 来实现。

.nav-bar { position: fixed; background-color: #333; left: 0; top: 0; right: 0; height: 64px; }

对今天的内容总结一句话，flex 布局是 css 布局的一次革命，好多布局难题对 flex 来说都不是事。大家加油！

带交互的 flex 布局教程，不懂都难

周末把前端小课网站进行了一次升级

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

最新回复(0)