问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css垂直居中问题

头像
asdfg
    229114856

    1. 父元素不定宽高，子元素不定宽高，如何让子元素垂直居中显示？

    2. 父元素不定宽高，子元素定宽度，如何让子元素垂直居中显示？

    htmlcss
    阅读 3.8k
    9 个回答
    得票最新
    头像
    xiguaxigua
      89141122
      头像
      冷石
        5771921

        父元素

        div{
    display:flex;
    justify-content:center;
    align-items:center;
}
        头像
        Leo_Eatle
          3871613

          很多答案...我随手写一个我常用的..

          child{
    top: 50%;
    transform: transformY(-50%);
}

          需要IE9+

          头像
          toBeTheLight
            16.6k41634

            父元素还是要有个高的吧，要不不等高了吗

                    <style type="text/css">
            .wrap {
              position: relative;
              width: 100%;
              height: 200px;
              background-color: #ccc;
            }
            .wrap .inner {
              position: absolute;
              left: 50%;
              top: 50%;
              background-color: #333;
              -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="wrap">
          <div class="inner">
              水平垂直居中水平垂直居中<br/>
          </div>
        </div>
    </body>
            头像
            战略忽悠局
              563773119

              第二条，子元素定宽，与垂直居中有关系吗？
              楼主这样的需求貌似只要给父元素设置需要的padding就可以了。

              头像
              Jakeyu
                277213
                头像
                毛驴旅长
                  1621816

                  最好把场景列出来，能满足你现在条件的我觉得就一个padding

                  头像
                  灰螳螂
                    1.6k575115

                    下次贴代码才知道你遇到的是什么问题，这种很多解决方案

                    头像
                    飞硕
                      444

                      楼主的意思是这些宽高不是在css里面写死，而是在具体执行时会有具体的结果。
                      第二个答案比较全面，其中有符合楼主需求的绝对定位+反向偏移，table-cell，弹性盒子三种方案，如果不考虑老旧浏览器的话都可以使用。
                      补充一点：table-cell里面的内容不用套壳。另外我以前用过一种最笨的方法————绝对定位+js计算（这个兼容性绝对好：）。

                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题