CSS布局(六)之居中布局

309 阅读2分钟

「这是我参与11月更文挑战的第十一天,活动详情查看:2021最后一次更文挑战」。

往期推荐:

CSS布局之全屏布局

CSS布局(二)之多列布局

CSS布局(三)之等分布局

CSS布局(四)之文本布局

CSS布局(五)之圣杯布局和双飞翼布局

前言

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

居中布局

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

image.png

代码如下:

<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;
  }
}

通过position的方法实现

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

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

通过display:flex的方法实现

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

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

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

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

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