深入探究 css水平垂直居中

前言

CSS 中实现水平垂直居中的实现方式很多,相信小白也会罗列很多方法。当然,大家别看到水平垂直居中就准备右上角 x 掉,本文的重点不是罗列有多少种方式实现水平垂直居中方式,而是探讨一下常见的几种水平垂直居中的方式的利与弊。

也就是:

  • 那么多种水平垂直居中的方式,如果真的在业务中需要使用了,你脑海里第一时间会想到哪个?
  • 不同的水平垂直居中方式,它们肯定存在差异,那么最显著的不同是什么?
  • 有没有所谓的最完美的水平垂直居中?

接下来将讨论 4 种水平垂直居中的方式,搭配图文为大家讲解:

  • absolute: position: absolute 配合 top:50%;left:50%;transform:translate(-50%, -50%)
  • autobot: display:flex 配合 margin:auto
  • flex: display:flex 配合 align-items:centerjustify-content:center
  • grid: display:grid 配合 place-content:center;

推荐阅读《CSS中值得收藏的七种垂直居中方法》《CSS如何实现不定宽高div水平垂直居中呢?

居中单个元素

对于如下简单的结构:

<div class="g-container">
    <div class="sub"></div>
</div>

居中单个元素而言,上述 4 种方法都很好,没有问题。

居中单个元素

居中多个元素

对于如下稍微复杂点的结构:

<div class="g-container">
    <div class="sub">1</div>
    <div class="sub">123</div>
    <div class="sub">123456</div>
</div>

那么如果是居中多个子元素,上述 4 种方法,就能体现出明显的不一样。稍微也修改一下子元素,不给它设定宽度,通过 padding 撑开即可:

.sub {
    border: 1px solid deeppink;
    padding: 10px;
    border-radius: 5px;
}

看看结果如何:

居中多个元素

简单分析分析:

  1. absolute 的方法明显有问题,由于用的绝对定位,其实 3 个子元素都叠在了一起
  2. flexgrid 的方法,如果不手动添加边距(margin 或者 gap),会贴在一起
  3. 不限制方向的话,flex 默认是水平排列,grid 是竖直排列
  4. 非常重要的一点,grid 布局下的子元素的宽度,所有子元素的宽度会被强行拉伸至最宽的一个子元素的内容的宽度

对于多个子元素,absolute 方法明显不适用, 接下来主要看剩余 3 个方法在一些细节上的差异。

控制间距

如果我们希望控制每个元素之间的间距呢?我们给 autobotflexgrid 的容器各自加上 gap: 5px,再看看:

.g-container{
    gap: 5px;
}

控制每个元素之间的间距

  1. margin: auto 由于需要均分剩余空间,所以表现并不好,无法按照我们设想的 5px 宽度进行间隔

让元素多到溢出

OK,接下来,我们让内容再多一点,多到溢出整个容器,看看有什么不一样。

让元素多到溢出

再来一张竖直方向排列的:

竖直方向排列

可以看到:

  1. 非常重要的一点,由于没有了剩余空间margin: auto 已经无法做到均匀分配,水平垂直居中了,而是一边贴着容器边,另外一边溢出
  2. flexgrid 都做到了即便超出容器空间,依然是水平垂直居中的

总结一下

经由上述几个 DEMO 可以看出来,在目前比较常用的水平垂直居中方案当中。flex 方案应该是目前而言最优的选择,它能够在各种环境下都保持内部元素的水平垂直居中并且不改变子元素的某些特征:

  1. 便捷的水平垂直居中单个元素
  2. 便捷的水平垂直居中多个元素,无论是横向、竖向,亦或内容超出
  3. 非常方便控制子元素之间的间距
  4. 不会改变子元素的宽度

当然,美中不足的是,可能相对而言,要敲多几个字符。

margin: autogrid 则或多或少有一些小问题。absolute 无法应付多个元素。

结语

本文知识点比较细,也表明 CSS 虽然简单,但是不代表它容易。我们日常工作中用到的很多属性其实还有很多细节可以挖掘深入。

比如,可以再比较下在书写方式 writing-mode 不同的场景下,上述水平垂直居中的方式的异同,等等。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 深入探究 css水平垂直居中

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发