V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
iFat3
V2EX  ›  CSS

[基础] 这 15 种 CSS 居中的方式,你都用过哪几种?

  •  
  •   iFat3 · 2018-03-25 09:33:04 +08:00 · 2786 次点击
    这是一个创建于 2195 天前的主题,其中的信息可能已经有所发展或是发生改变。

    简言

    CSS 居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把 CSS 居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共 15 种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。

    css 居中

    1 水平居中

    1.1 内联元素水平居中

    利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

    ** 核心代码:**

    .center-text {
        text-align: center;
     }
    

    ** 演示程序:**

    演示代码

    1.2 块级元素水平居中

    通过把固定宽度块级元素的margin-leftmargin-right设成 auto,就可以使块级元素水平居中。

    ** 核心代码:**

    .center-block {
      margin: 0 auto;
    }
    

    ** 演示程序:**

    演示代码

    1.3 多块级元素水平居中

    1.3.1 利用inline-block

    如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

    ** 核心代码:**

    .container {
        text-align: center;
    }
    .inline-block {
        display: inline-block;
    }
    

    ** 演示程序:**

    演示代码

    1.3.2 利用display: flex

    利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式,本例中设置子元素水平居中显示。

    ** 核心代码:**

    .flex-center {
        display: flex;
        justify-content: center;
    }
    

    ** 演示程序:**

    演示代码

    2 垂直居中

    2.1 单行内联(inline-)元素垂直居中

    通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。

    ** 核心代码:**

    #v-box {
        height: 120px;
        line-height: 120px;
    }
    

    ** 演示程序:**

    演示代码

    2.2 多行元素垂直居中

    2.2.1 利用表布局(table

    利用表布局的vertical-align: middle可以实现子元素的垂直居中。

    ** 核心代码:**

    .center-table {
        display: table;
    }
    .v-cell {
        display: table-cell;
        vertical-align: middle;
    }
    

    ** 演示程序:**

    演示代码

    2.2.2 利用 flex 布局(flex

    利用 flex 布局实现垂直居中,其中flex-direction: column定义主轴方向为纵向。因为 flex 布局是 CSS3 中定义,在较老的浏览器存在兼容性问题。

    ** 核心代码:**

    .center-flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    

    ** 演示程序:**

    演示代码

    2.2.3 利用“精灵元素”

    利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个 100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。

    ** 核心代码:**

    .ghost-center {
        position: relative;
    }
    .ghost-center::before {
        content: " ";
        display: inline-block;
        height: 100%;
        width: 1%;
        vertical-align: middle;
    }
    .ghost-center p {
        display: inline-block;
        vertical-align: middle;
        width: 20rem;
    }
    

    ** 演示程序:**

    演示代码

    2.3 块级元素垂直居中

    2.3.1 固定高度的块级元素

    我们知道居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部 50%,并设置margin-top向上偏移元素高度的一半,就可以实现垂直居中了。

    ** 核心代码:**

    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; 
    }
    

    ** 演示程序:**

    演示代码

    2.3.2 未知高度的块级元素

    当垂直居中的元素的高度和宽度未知时,我们可以借助 CSS3 中的transform属性向 Y 轴反向偏移 50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

    ** 核心代码:**

    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    

    ** 演示程序:**

    演示代码

    3 水平垂直居中

    3.1 固定宽高元素水平垂直居中

    通过 margin 平移元素整体宽度的一半,使元素水平垂直居中。

    ** 核心代码:**

    .parent {
        position: relative;
    }
    .child {
        width: 300px;
        height: 100px;
        padding: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -70px 0 0 -170px;
    }
    

    ** 演示程序:**

    演示代码

    3.2 未知宽高元素水平垂直居中

    利用 2D 变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中。

    ** 核心代码:**

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

    ** 演示程序:**

    演示代码

    3.3 利用 flex 布局

    利用 flex 布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义 flex 子项在 flex 容器的当前行的侧轴(纵轴)方向上的对齐方式。

    ** 核心代码:**

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

    ** 演示程序:**

    演示代码

    3.4 利用 grid 布局

    利用 grid 实现水平垂直居中,兼容性较差,不推荐。

    ** 核心代码:**

    .parent {
      height: 140px;
      display: grid;
    }
    .child { 
      margin: auto;
    }
    

    ** 演示程序:**

    演示代码

    3.5 屏幕上水平垂直居中

    屏幕上水平垂直居中十分常用,常规的登录及注册页面都需要用到。要保证较好的兼容性,还需要用到表布局。

    ** 核心代码:**

    .outer {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    
    .middle {
        display: table-cell;
        vertical-align: middle;
    }
    
    .inner {
        margin-left: auto;
        margin-right: auto; 
        width: 400px;
    }
    

    ** 演示程序:**

    演示代码

    4 说明

    文中所述文字及代码部分汇编于网络。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。

    文中所述方案只是居中方案其中的一部分,并不是全部。另代码中涉及 CSS3 的 flex,transform,grid 等内容都存在兼容性问题。

    5 引用参考

    Centering in CSS: A Complete Guide

    w3.org centering things

    How To Center Anything With CSS

    如何使 DIV 在屏幕上水平垂直居中显示?

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3887 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 10:31 · PVG 18:31 · LAX 03:31 · JFK 06:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.