演示

Question

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

调整大小时，margin-top相对于宽度

CSS

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

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/

它是如何工作的？

水平居中（简单）：

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

垂直居中：

使用 ghost 元素将线条高度设置为100％高度：

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

使用#mini垂直（相对于该行）居中vertical-align：

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

浏览器支持

基本上所有东西和IE 8 +。

如果您使用真实元素作为 ghost 而不是:before伪元素，也可以支持IE7。但它在语义上并不正确。

Answer 2

以下是最佳方法：(live example)。它在所有现代浏览器中都受支持。 Reference

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

然后将正文或父元素的显示设置为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;
}

Answer 3

这是一个纯CSS的解决方法，不依赖于表格布局或使用内联块元素。诀窍是将#mini元素从左侧和顶部中间位置放置在其父级中间。之后，我们使用CSS变换将元素本身偏移其自身宽度和高度的一半：

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

See Fiddle

今天的浏览器中只有CSS 2D transform is quite widely supported，全球支持率约为80％。如果您也想支持IE9用户，您可能希望包含-ms-供应商前缀。

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/

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

在全屏div中居中基于百分比的div

4 个答案:

演示

代码

它是如何工作的？

浏览器支持