V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
disinfeqt
V2EX  ›  分享创造

Perfect centering with pure CSS

  •  
  •   disinfeqt · 2010-07-24 04:11:08 +08:00 · 6079 次点击
    这是一个创建于 5219 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有时为了做一个很酷的演示页面,会需要用到绝对居中(水平+垂直)。
    如果是像这样写,会有很大的局限性。
    最近开始用这个自己摸索出来的方法来居中:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Perfect Centering</title>
    <style>
    html {
    display:table;
    height:100%;
    width:100%;
    }
    body {
    display:table-cell;
    height:105px;
    text-align:center;
    vertical-align:middle;
    width:418px;
    }
    </style>
    </head>
    <body>
    <h1>I should've been centered and I'm cool with it.</h1>
    </body>
    </html>

    What about IE? Just fuck off.
    4 条回复    1970-01-01 08:00:00 +08:00
    disinfeqt
        1
    disinfeqt  
    OP
       2010-07-24 04:12:23 +08:00
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Perfect Centering</title>
    <style>
    html {
    display:table;
    height:100%;
    width:100%;
    }
    body {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    }
    </style>
    </head>
    <body>
    <h1>I should've been centered and I'm cool with it.</h1>
    </body>
    </html>

    Sorry sorry,哪里来的高度宽度... 囧
    airwolf
        2
    airwolf  
       2010-07-24 06:49:52 +08:00 via iPod
    Wow, 正好可以用到的,看起来很犀利啊!

    Thanks :)
    disinfeqt
        3
    disinfeqt  
    OP
       2010-07-24 16:04:07 +08:00
    @airwolf Glad to help :)
    lianghai
        4
    lianghai  
       2010-07-24 20:27:13 +08:00
    哇靠,感慨,原来“display:”这么牛。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5498 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 09:30 · PVG 17:30 · LAX 01:30 · JFK 04:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.