问答详情
源自：4-2 居中布局的第一种解决方案及优缺点

table-cell实现垂直居中还有一个比较大的缺点

table-cell实现垂直居中必须要给table-cell元素规定一个width，而且不能设置成100%，像老师这样刚好设置的1000px躲避了这个问题

提问者：Civo 2019-11-03 00:50

个回答

  • ccyy_阿亮
    2020-12-02 19:07:03

    这是表宽计算的问题，自己再加个parent-fix容器，设置该容器“display: table; width: 100%”

    0
  • 杨超越赐我offer
    2019-11-10 18:42:09

    ##不要吵了，我直接上图吧


    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>水平垂直居中</title>

    <style type="text/css">

    #parent{

    width: 100%;

    height: 600px;

    background-color: #CCCCCC;

    text-align: center;

    display: table-cell;

    vertical-align: middle;

    }

    #child{

    width: 200px;

    height: 200px;

    background-color: #C9394A;

    display: inline-block;

    }

    </style>

    </head>

    <body>

    <div id="parent">

    <div id="child">

    水平垂直居中

    </div>

    </div>

    </body>

    </html>


    http://img2.mukewang.com/5dc7e96d0001eb4e04030855.jpg

    0
  • weixin_慕盖茨1344029
    2019-11-07 08:20:03

    width：100%撑不开

    0
  • 丨Serendipity
    2019-11-03 20:04:28

    你是不是对垂直居中有什么误解？?

    0
  • 丨Serendipity
    2019-11-03 20:00:02

    垂直居中，设高度就可以，和宽度没关系

    0
  • 丨Serendipity
    2019-11-03 10:44:00

    其实不需要，它会根据子元素的内容宽度而自动撑开

    0