在全屏 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%;
}

Answer 1

这是最好的方法：(live example)。所有现代浏览器都支持它。 Reference.

将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;
}

Answer 2

演示

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;
  }
  

• 垂直居中：

  1. 使用 ghost 元素将线条高度设为 100% 高度：

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

  2. 以vertical-align 垂直（相对于该行）居中#mini：

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

浏览器支持

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

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

Answer 3

看起来您需要使用一些 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/

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

Answer 4

这是一个纯 CSS 解决方法，不依赖表格布局或使用 inline-block 元素。诀窍是将#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- 供应商前缀。