关闭

Css几种水平垂直居中的方式的利弊

时间: 2020-11-09阅读: 42标签: 布局

css 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉,本文的重点不是罗列有多少种方式实现水平垂直居中方式,而是探讨一下常见的几种水平垂直居中的方式的利弊。

嗯哼?也就是:

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

本文将讨论 4 种水平垂直居中的方式,分别是,并且每个起个名字方面下面看图:

  1. absolute: position: absolute 配合 top:50%;left:50%;transform:translate(-50%, -50%)
  2. autobot: display:flex 配合 margin:auto
  3. flex: display:flex 配合 align-items:center、justify-content:center
  4. grid: display:grid 配合 place-content:center;

居中单个元素

对于如下简单的结构:

<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. flex 和 grid 的方法,如果不手动添加边距(margin 或者 gap),会贴在一起
  3. 不限制方向的话,flex 默认是水平排列,grid 是竖直排列
  4. 非常重要的一点,grid 布局下的子元素的宽度,所以子元素的宽度会被强行拉伸至最宽的一个子元素的内容的宽度

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


控制间距

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

.g-container{
    gap: 5px;
}


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


让元素多到溢出

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


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


可以看到:

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


总结一下

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

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

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

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10044

关闭

什么是BFC布局——浅析BFC布局的概念以及作用

BFC 可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性,这就是BFC

响应式布局

Responsive web page响应式布局/自适应网页,可以根据浏览器设备不同(pc,pad,phone)而自动的更改布局,图片,文字效果,不会影响用户体验

Flexbox响应式网页布局

透过Flexbox实现响应式网页布局同样可分为三步:将容器显示为flex,并让它wrap;将需要响应的元素放在容器当中,并用百分比设定每一个元素的basis;通过Media Query将容器的flex方向改为column(预设为row)。

移动WEB开发-响应式布局

响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。

css 浮动布局,清除浮动

浮动的特性:(1)浮动元素有左浮动(float:left)和右浮动(float:right)两种(2)浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来

rem布局原理

rem 是(根)字体大小相对单位,也就是说跟当前元素的font-size没有关系,而是跟整个body的font-size有关系,物理像素是硬件的一个实际像素;而逻辑像素是我们在网页设计中使用的像素

html页面body与div之间产生空白解决方法

在做一个页面输出时发现body与div之间出现20px左右高度的空白,尝试多种方法无解,尤其是方法1也解决不了,后来发现原来是html文件编码格式问题造成的!css初始化,解决不了,就将html文件格式保存为utf-8编码格式,即问题完美解决

你以为 CSS 只是个简单的布局?

本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。

css如何实现n宫格布局?

现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比

CSS 高级布局技巧

随着 IE8 逐渐退出舞台,很多高级的 CSS 特性都已被浏览器原生支持,再不学下就要过时了。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!