在全屏div中居中一个百分比宽度的div

Question

我知道百分比的 margin-top 是相对于宽度的...这就是为什么我不能总是垂直和水平居中一个高度为 50％，宽度为全屏幕 50％ 的 div。

http://jsfiddle.net/8BJ94/

当你调整大小时，margin-top 是相对于宽度的。

CSS

#mini {
   height : 50%;
   width : 50%;
   background-color : #FFFFFF;
   margin-top : 25%;
   margin-left : 25%;
}

- Damien

Answer 1

演示

http://jsfiddle.net/8BJ94/1/

代码

#hello {
    position : absolute;
    width : 100%;
    height : 100%;
    background-color : #123456;
    text-align: center;
}
#hello:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#mini {
    height : 50%;
    width : 50%;
    background-color : #FFFFFF;
    display: inline-block;
    vertical-align: middle;
}

基于http://css-tricks.com/centering-in-the-unknown/。

它是如何工作的？

• Horizontal centering (easy):

  #hello {
      text-align: center;
  }
  #mini {
      display: inline-block;
  }
  

• Vertical centering:

  1. Make line's height to be 100% height with a ghost element:

     #hello:before {
         content: '';
         display: inline-block;
         height: 100%;
         vertical-align: middle;
     }
     

  2. Center #mini vertically (relatively to that line) with vertical-align:

     #mini {
         display: inline-block;
         vertical-align: middle;
     }
     

浏览器支持

基本上所有浏览器都支持，包括IE 8及以上版本。

如果您使用真实元素作为ghost而不是:before伪元素，也可以支持IE7。但这并不符合语义规范。

- Oriol

---

谢谢！那是一个好的解决方案 :) 它完美地工作了！非常感谢！ - Damien

Answer 2

这是最好的方法：（实例）。它支持所有现代浏览器。参考链接。

将html/body元素设置为height:100%和width:100%。

然后将父元素或body的显示设置为table。

最后，在子元素上使用display:table-cell和vertical-align:middle。

这样可以解决垂直对齐的问题。

为了水平居中，请在子元素上设置margin:0px auto。

在某些情况下，如果子元素的宽度未定义或动态生成，则可以使用text-align:center，假设它是一个inline元素。 HTML

<div id="parent">
    <div id="child"></div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0px;
}
body {
    display:table;
}

#parent {
    display:table-cell;
    vertical-align:middle;
    background:#123456;
}
#child {
    height:50%;
    width:50%;
    background:white;
    margin:0px auto;
}

- Josh Crozier

---

@JHuangweb 谢谢 - 看起来这正是 OP 想要的。 - Josh Crozier

Answer 3

这里是一个纯CSS解决方案，不依赖表格布局或使用内联块元素。诀窍是将#mini元素绝对定位在其父元素中心位置。然后，我们使用CSS transform将元素本身偏移其宽度和高度的一半：

#mini {
    height: 50%;
    width: 50%;
    background-color : #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

查看 Fiddle

今天，CSS 2D 变换在浏览器中得到了相当广泛的支持，全球支持率约为80%。如果您想支持IE9用户，您可能还需要包括 -ms- 厂商前缀。

- Terry

---

谢谢你，这是一个非常有趣的解决方案。我会选择另一种支持最大浏览器的解决方案，但这个方案很有趣且经济实惠！ - Damien

Answer 4

看起来你需要使用一些JavaScript。使用jQuery：

$(document).ready(function() {
  var topMargin = $(window).height()*.25;
  $("#mini").css('margin-top', topMargin);
})

$(window).resize(function() {
  var topMargin = $(window).height()*.25;
  $("#mini").css('margin-top', topMargin);
})

在这里试验代码：http://jsfiddle.net/dphaener/2n4PL/

第一个函数在页面加载时设置边距，第二个函数在每次调整窗口大小时设置边距。

- dphaener

---

请不要使用JavaScript来做那些可以仅用CSS完成的事情。 - Oriol

我同意，但不幸的是我不够聪明，无法想出那个巧妙的纯CSS解决方案。 - dphaener