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

做前端的时候水平居中很容易做到。垂直居中一般怎么做呢?

  •  1
     
  •   cevincheung ·
    cevin · 2015-08-15 08:00:07 +08:00 · 4775 次点击
    这是一个创建于 3393 天前的主题,其中的信息可能已经有所发展或是发生改变。
    //水平居中是在一条横向的直线的中点是吧?
    

    水平居中的话一般都是margin:0 auto;就可以了。垂直呢?有什么简单的方法么?

    27 条回复    2015-08-16 11:34:01 +08:00
    cqcn1991
        1
    cqcn1991  
       2015-08-15 08:04:59 +08:00 via iPhone
    …老大难问题…
    Septembers
        2
    Septembers  
       2015-08-15 08:07:23 +08:00 via Android
    display: table-cell; vertical-align: middle;
    但是要 定宽,定高
    pagecho
        3
    pagecho  
       2015-08-15 08:11:31 +08:00
    sadscv
        4
    sadscv  
       2015-08-15 08:15:36 +08:00 via Android
    用line-height去控制。
    br00k
        5
    br00k  
       2015-08-15 08:18:00 +08:00   ❤️ 1
    http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

    其实也很容易,比较神奇的是第三个。还有一种是inline元素参照来垂直居中,方式很多,看自己需要使用。
    yakczh
        7
    yakczh  
       2015-08-15 08:23:29 +08:00
    table valign="middle"
    neone
        8
    neone  
       2015-08-15 08:31:33 +08:00
    lxrmido
        10
    lxrmido  
       2015-08-15 08:43:34 +08:00
    top:50%;
    margin-top:-50%;
    airyland
        11
    airyland  
       2015-08-15 08:57:54 +08:00
    top 50% 然后 margin translate -50% 就不用固定宽高了
    coraline
        12
    coraline  
       2015-08-15 09:13:40 +08:00
    mok502
        13
    mok502  
       2015-08-15 09:49:07 +08:00 via Android
    Jeremial
        14
    Jeremial  
       2015-08-15 09:51:23 +08:00
    比较先进的浏览器的话, 就用

    position:absolute;
    top: 50%;
    left: 50;
    transform: translate(-50%, -50%);
    nine
        15
    nine  
       2015-08-15 09:53:23 +08:00
    yhxx
        16
    yhxx  
       2015-08-15 09:54:02 +08:00
    jiongxiaobu
        18
    jiongxiaobu  
       2015-08-15 10:18:56 +08:00 via Android
    0 0根据不同情况有不同的方法
    aivier
        19
    aivier  
       2015-08-15 12:04:51 +08:00
    css-tricks上面有一个向导,可以根据不同需求告诉你该怎么做
    tinyhill
        20
    tinyhill  
       2015-08-15 12:11:03 +08:00
    容器 display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;
    arzusyume
        21
    arzusyume  
       2015-08-15 13:28:08 +08:00
    不怎么动脑子的写法...
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto

    加上left: 0, right:0 还能绝对居中...
    an168bang521
        22
    an168bang521  
       2015-08-15 13:34:46 +08:00
    .test{width: 400px;height: 400px;background: orange;position: absolute;top: 50%;left: 50%;margin: -200px 0 0 -200px;}
    我是这么写的;
    Clauz
        23
    Clauz  
       2015-08-15 15:29:21 +08:00   ❤️ 2
    jsonline
        24
    jsonline  
       2015-08-15 15:30:12 +08:00 via Android
    不会搜索?
    guoqiao
        25
    guoqiao  
       2015-08-15 15:32:25 +08:00 via iPhone
    @Clauz 终于有人贴出这个链接了。读了它,再也不操心居中问题。
    yuandong
        27
    yuandong  
       2015-08-16 11:34:01 +08:00
    用transform
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5400 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:14 · PVG 15:14 · LAX 23:14 · JFK 02:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.