CSS 布局（六）之居中布局

作者：Augus

往期推荐：

前言

居中布局相信各位要用的场景算是比较多得了，大到类似登录页，小到按钮中的一个小图标，都需要达到居中的效果。今天就带大家来具体看一看居中布局的实现方法。

居中布局实现的方式可以说是有很多种，今天就给大家大家说一比较常用的方式，和一种比较经典的方式。

代码如下：

<div class="layout">  <div class="layout-content"></div></div>

复制代码

.layout {  width: 1000px;  height: 800px;  background: gray;  .layout-content {    width: 200px;    height: 200px;    background-color: crimson;  }}

复制代码

这种方法呢，可以说是一种非常经典的方法了，通过绝对定位偏移父节点上左的 50%，在通过 transform 偏移自身的-50%即可。不过，看完全篇文章你会发现，相较于 display：flex；来说还是相对繁琐的，不过具体场景具体方法，这就看自己的判断了。偷偷说一句，flex 大法好。

.layout {  position: relative;  layout-content {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);  }}

复制代码

通过 display：flex 的方法，相信各位用到的算是非常多的，他也算是所有居中布局中最强的了，没有之一，并且代码非常简单。

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

复制代码

对了，还有骚操作同样可以实现居中布局，可以说是史上最简。Mark，Mark。

.layout {  display: flex;  .layout-content {    margin: auto;  }}

复制代码

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！

发布于: 1 小时前阅读数: 5

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论