cevincheung

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

  •  1
     
  •   cevincheung ·
    cevin · Aug 15, 2015 · 6216 views
    This topic created in 4107 days ago, the information mentioned may be changed or developed.
    //水平居中是在一条横向的直线的中点是吧?
    

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

    27 replies  •  2015-08-16 11:34:01 +08:00
    cqcn1991
    cqcn1991
    Aug 15, 2015 via iPhone
    1
    …老大难问题…
    Septembers
    Septembers
    Aug 15, 2015 via Android
    2
    display: table-cell; vertical-align: middle;
    但是要 定宽,定高
    sadscv
    sadscv
    Aug 15, 2015 via Android
    4
    用line-height去控制。
    br00k
    br00k
    Aug 15, 2015❤️1
    5
    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
    yakczh
    Aug 15, 2015
    7
    table valign="middle"
    lxrmido
    lxrmido
    Aug 15, 2015
    10
    top:50%;
    margin-top:-50%;
    airyland
    airyland
    Aug 15, 2015
    11
    top 50% 然后 margin translate -50% 就不用固定宽高了
    mok502
    mok502
    Aug 15, 2015 via Android
    13
    ik0r
    ik0r
    Aug 15, 2015
    14
    比较先进的浏览器的话, 就用

    position:absolute;
    top: 50%;
    left: 50;
    transform: translate(-50%, -50%);
    jiongxiaobu
    jiongxiaobu
    Aug 15, 2015 via Android
    18
    0 0根据不同情况有不同的方法
    aivier
    aivier
    Aug 15, 2015
    19
    css-tricks上面有一个向导,可以根据不同需求告诉你该怎么做
    tinyhill
    tinyhill
    Aug 15, 2015
    20
    容器 display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center;
    arzusyume
    arzusyume
    Aug 15, 2015
    21
    不怎么动脑子的写法...
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto

    加上left: 0, right:0 还能绝对居中...
    an168bang521
    an168bang521
    Aug 15, 2015
    22
    .test{width: 400px;height: 400px;background: orange;position: absolute;top: 50%;left: 50%;margin: -200px 0 0 -200px;}
    我是这么写的;
    jsonline
    jsonline
    Aug 15, 2015 via Android
    24
    不会搜索?
    guoqiao
    guoqiao
    Aug 15, 2015 via iPhone
    25
    @Clauz 终于有人贴出这个链接了。读了它,再也不操心居中问题。
    yuandong
    yuandong
    Aug 16, 2015
    27
    用transform
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4246 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 105ms · UTC 09:19 · PVG 17:19 · LAX 01:19 · JFK 04:19
    ♥ Do have faith in what you're doing.