首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
宝塔
V2EX  ›  前端开发

前端新人的 CSS 与居中小结

  •  
  •   banxi1988 · 2018-08-26 16:37:37 +08:00 · 1412 次点击
    这是一个创建于 450 天前的主题,其中的信息可能已经有所发展或是发生改变。

    点击查看此文示例 Demo 文件

    在 CSS 中居中是一个常见的问题,也是一个基本问题。既然是常见的基本问题,那真是有必要加以研究和加以总结。

    行内元素的居中

    使用 text-align:center 实现行内元素的水平居中

    text-align:center 估计是最古老 CSS 居中技术了。 适用于文本,span,a等行内元素。

    使用 line-height 实现行内元素实现垂直居中

    这一技巧也是适用于行内元素。 具体的实现是将 line-height 设置成跟元素高度一致来实现行内元素的垂直居中。 详情见示例中 .primary-button 类的 CSS。

    块元素居中技术

    块元素水平居中经典技术:margin 与 auto

    以前块级元素居中常用的技术便是通过如下的设置来实现块级元素的水平居中.(此法不适用内联块级元素)

    div {
      width: 720px; /*指定块元素的宽度*/
      margin: 0 auto; /*指定自动计算左右外边距*/
    }
    

    块元素水平居中新手法: transform

    可以通过如下属性实现块级元素及内联块级元素的水平居中。

    margin-left: 50%;
    transform: translateX(-50%);
    

    值得说明的是,此方法无法实现垂直居中,因为margin-top:50% 相当于 margin-top: 最近的块元素容器的宽度 ,所以margin 中的百分比的计算方式限制其无法应用于垂直居中.

    居中大法: flex

    flex 布局技术的出现,解决了 CSS 没有正式的居中布局技术的尴尬。 以 flex-direction 的默认设置 flex-direction:row 为例。 justify-content:center 可实现水平居中对齐,align-items:center 可实现垂直居中对齐。 flex 作为通用的布局技术,居中只是其中的一点点组合特性。

    值得注意的是,除了使用 flex, CSS 中没有其他的能用的垂直居中的技术。

    15 回复  |  直到 2018-08-26 21:18:32 +08:00
        1
    MuscleOf2016   2018-08-26 16:58:58 +08:00
    水贴吗
        2
    yangg   2018-08-26 17:16:54 +08:00 via iPhone
    值得注意的是不知道的别下结论
        3
    banxi1988   2018-08-26 17:40:47 +08:00
    @yangg #2
    sorry, 文中有一个错别字, “能” > "通"
    > 值得注意的是,除了使用 flex, CSS 中没有其他的通用的垂直居中的技术。
    五笔前端新手让您见笑了。
        4
    dr2009   2018-08-26 18:05:04 +08:00   ♥ 1
    还有可以利用 `display:tabel-cell` 居中

    上个国外的一份总结...
    https://codepen.io/shshaw/full/gEiDt
        5
    qiutianaimeili   2018-08-26 18:29:12 +08:00
    grid 布局比 flex 布局还要厉害,而且还有很多居中的奇技淫巧,说的这么绝对不太好吧。
        6
    molvqingtai   2018-08-26 18:38:52 +08:00 via Android
    position: absolute;
    left:0;
    right:0;
    margin:0 auto;
        7
    banxi1988   2018-08-26 19:33:00 +08:00
    @molvqingtai #6 我刚测试了一下,此 css 无法实现垂直居中。( Chrome: 68 )
        8
    dr2009   2018-08-26 19:43:02 +08:00
    @banxi1988 那个你可以试下
    position: absolute;
    left:0;
    right:0;
    top:0;
    left:0;
    margin: auto;

    父元素 position: relative;
        9
    banxi1988   2018-08-26 19:43:34 +08:00
    @qiutianaimeili #5 grid 看了感觉比较复杂,学不动了。目前主要依靠 flex 搞定一切。
    感谢 flex 拯救我这种前端新手。忙起来时,根本没空去研究那些个奇技。
        10
    banxi1988   2018-08-26 19:53:51 +08:00
    @dr2009 真不行,上面介绍的文章我也初略看了一下。
    嗯,我创建了个 jsfiddle,如果可以的话,你可以修改看看,看是否能使用绝对布局实现垂直居中。或者是还需要其他结构的配合,不过如此看来 flex 居中实现还是比较通用些。
    http://jsfiddle.net/01527xba/7/
        11
    dr2009   2018-08-26 20:09:08 +08:00   ♥ 1
    @banxi1988 你代码写错了...两个 right:0 .少了 top:0
        12
    dr2009   2018-08-26 20:12:51 +08:00
    @banxi1988 移动端可以无脑 flex. pc 如果不兼容 ie9 以及以下的话也可以无脑 flex..
        13
    banxi1988   2018-08-26 21:04:57 +08:00
    @dr2009 感谢. 不过应该是适合需要显式指定一个合适的高度的场景。
    还是喜欢无脑 flex, 我目前的项目都是无脑 flex.
        14
    yikyo   2018-08-26 21:13:55 +08:00
    transform 可以垂直居中

    position: absolute;
    top:50%;
    transform: translateY(-50%);

    父元素 position: relative;
        15
    suzic   2018-08-26 21:18:32 +08:00 via Android
    还有种 inline-block 的,左侧放一个空元素
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   956 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 21:25 · PVG 05:25 · LAX 13:25 · JFK 16:25
    ♥ Do have faith in what you're doing.