乱世@小熊 2008-12-28 12:57 采纳率: 25%
浏览 695
已采纳

如何为所有浏览器垂直居中一个 div?

I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.

<body>
    <div>Div to be aligned vertically</div>
</body>

How can I center a div vertically in all major browsers, including Internet Explorer 6?

转载于:https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers

  • 写回答

28条回答 默认 最新

  • 衫裤跑路 2011-05-31 03:13
    关注

    Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and working for recent versions of Firefox, Opera, Chrome, and Safari.

    .outer {
      display: table;
      position: absolute;
      height: 100%;
      width: 100%;
    }
    
    .middle {
      display: table-cell;
      vertical-align: middle;
    }
    
    .inner {
      margin-left: auto;
      margin-right: auto;
      width: 400px;
      /*whatever width you want*/
    }
    <div class="outer">
      <div class="middle">
        <div class="inner">
          <h1>The Content</h1>
          <p>Once upon a midnight dreary...</p>
        </div>
      </div>
    </div>

    View A Working Example With Dynamic Content

    I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(27条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题