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

七种 css 方式让一个容器水平垂直居中

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

    阅读目录

    方法一: position 加 margin 方法二: diaplay:table-cell 方法三: position 加 transform 方法四: flex;align-items: center;justify-content: center 方法五: display:flex;margin:auto 方法六:纯 position 方法七:兼容低版本浏览器,不固定宽高

    总结

    这种 css 布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。

    这种方法比较多,本文只总结其中的几种,以便加深印象。

    效果图都为这个:

    方法一: position 加 margin

    /html/

    /css/ .wrap { width: 200px; height: 200px; background: yellow; position: relative; } .wrap .center { width: 100px; height: 100px; background: green; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } 兼容性:主流浏览器均支持, IE6 不支持

    方法二: diaplay:table-cell

    /css/ .wrap{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center; } .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green; } 兼容性:由于 display:table-cell 的原因, IE6\7 不兼容

    方法三: position 加 transform

    /* css */ .wrap { position: relative; background: yellow; width: 200px; height: 200px;}

    .center { position: absolute; background: green; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px; } 兼容性: ie9 以下不支持 transform ,手机端表现的比较好。

    方法四: flex;align-items: center;justify-content: center

    /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }

    .center { background: green; width: 100px; height: 100px; } 移动端首选

    方法五: display:flex;margin:auto

    /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; }

    .center { background: green; width: 100px; height: 100px; margin: auto; } 移动端首选

    方法六:纯 position

    /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative; } /方法一/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;

    } /方法二/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px; } 兼容性:适用于所有浏览器

    方法六中的方法一计算公式如下:

    子元素( conter )的 left 值计算公式: left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px; 子元素( conter )的 top 值计算公式: top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;

    方法二计算公式: left 值固定为 50%; 子元素的 margin-left= -(子元素的宽 /2 )=-100/2= -50px; top 值也一样,固定为 50%

    子元素的 margin-top= -(子元素的高 /2 )=-100/2= -50px;

    方法七:兼容低版本浏览器,不固定宽高

    不固定宽高,自适应

    /css/ .table { height: 200px;/高度值不能少/ width: 200px;/宽度值不能少/ display: table; position: relative; float:left; background: yellow; }

    .tableCell { display: table-cell; vertical-align: middle; text-align: center;
    *position: absolute; padding: 10px; *top: 50%; *left: 50%; } .content { *position:relative; *top: -50%; *left: -50%; background: green; } 暂时总结上面的七种,这种方法太多,其实只要习惯了其中的一两种也就够用了。

    总结

    如果是移动端,那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况,快、准、狠

    也就是用 flex; align-items: center; justify-content: center;

    /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }

    .center { background: green; width: 100px; height: 100px; } 或者 display:flex;margin:auto;

    /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; }

    .center { background: green; width: 100px; height: 100px; margin: auto; } 如果是 PC 端,要考虑兼容性的话。方法六是不错滴,也就是纯 position 。

    /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative; } /方法一/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;

    } /方法二/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px; } 如果 PC 端的中间的元素高度不固定,那么就用方法七即可,代码就不复制了

    这种 css 元素垂直的如果真的要总结起来,应该有十几二十几种。不过也没必要全部掌握吧,只要大概了解一些,用起来没有副作用就行。

    有误之处,欢迎指出

    13 条回复    2016-09-27 11:36:55 +08:00
    newbieo0O
        1
    newbieo0O   2016-09-26 16:12:11 +08:00
    IE 早就不管了。
    abelyao
        2
    abelyao   2016-09-26 16:12:37 +08:00
    flex 大法好
    DualWield
        3
    DualWield   2016-09-26 16:16:14 +08:00
    毫无排版
    azh7138m
        4
    azh7138m   2016-09-26 16:39:59 +08:00
    [未知尺寸元素水平垂直居中]( http://demo.doyoe.com/css/alignment/#inline-block4) Figure 8

    少说也是兼容到 IE6
    Candy0
        5
    Candy0   2016-09-26 17:26:57 +08:00
    @azh7138m 多谢分享~
    Candy0
        6
    Candy0   2016-09-26 17:27:44 +08:00
    @DualWield 。。。额 多谅解 一时疏忽 还没法改。。。
    SourceMan
        7
    SourceMan   2016-09-26 17:27:48 +08:00
    排版不行
    zhouquanbest
        8
    zhouquanbest   2016-09-26 17:27:56 +08:00
    flex 大法好
    BOYPT
        9
    BOYPT   2016-09-26 17:29:40 +08:00
    人生苦短,我用 flex
    mcfog
        10
    mcfog   2016-09-26 17:30:00 +08:00   ❤️ 1
    Candy0
        11
    Candy0   2016-09-26 17:40:16 +08:00
    发个排版正常的网站 : http://forums.fami2u.com/t/css/76
    penjianfeng
        12
    penjianfeng   2016-09-27 09:56:47 +08:00
    @mcfog 这个很赞,非常感谢
    Candy0
        13
    Candy0   2016-09-27 11:36:55 +08:00
    @mcfog 感谢哦~
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2483 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 07:55 · PVG 15:55 · LAX 00:55 · JFK 03:55
    ♥ Do have faith in what you're doing.