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

Posted 2023-03-06

【中文标题】在全屏 div 中居中基于百分比的 div

【英文标题】：Center a percentage based div within a fullscreen div

【发布时间】：2013-11-29 12:28:52

【问题描述】：

我知道 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%;

【参考方案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;

【讨论】：

@JHuangweb 谢谢 - 这似乎是 OP 想要的。

【参考方案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;

垂直居中：

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

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

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

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

浏览器支持

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

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

【讨论】：

谢谢！这是一个很好的解决方案:) 它完美地工作！非常感谢！

【参考方案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/

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

【讨论】：

请不要使用 JavaScript 做只能用 CSS 做的事情。

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

【参考方案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- 供应商前缀。

【讨论】：

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