Question

如果你看到我的Fiddle，你就会明白我的意思。如果没有，我需要“欢迎”div垂直和水平居中于其容器div，同时响应屏幕尺寸。

<div class="background">
    <div class="welcome">Welcome</div>
</div>

我可以通过设置相对位置并使用css来完成它并完成它，但我需要一个可能的jQuery修复。

解决方案不能具有绝对定位。不想为这个小问题添加jQuery UI插件。

Answer 1

假设您已经知道要居中的元素的尺寸：

.welcome{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

通过绝对定位元素，我们可以将其与周围环境分离，并指定其相对于浏览器窗口的位置。从窗口的左侧和顶部偏移div 50％，您的左上角正好位于页面的中心。我们唯一要做的就是将div移动到左边和顶部，宽度和高度的一半带有负边距，以使其完美居中。

更新了您的小提琴：http://jsfiddle.net/YgQLh/10/

Answer 2

你可以这样做：

首先删除padding-bottom并制作窗口的div 100%：

html,body{
   height:100%;
}
.background {
   height:100%;
}

然后使用它来垂直居中“欢迎”：

.background:before {
   content:" ";
   display:inline-block;
   height:100%;
   vertical-align:middle;
}

Fiddle Demo

Answer 3

您可以使用纯CSS解决方案来完成此操作。主要是在代码中取出'padding-bottom:72%'并添加更多元素。

DEMO

让我们通过查看CSS来分解它：

.background {
    background-image: url('http://i.telegraph.co.uk/multimedia/archive/02746/Guy-Whittingham_AI_2746762b.jpg');
    /* padding-bottom: 72%; */
    color: #FFF;
    background-size: cover;
    background-position: center center;
    vertical-align:middle;
    text-align:center;
    width: 350px;
    height: 350px;
    display:table-cell;
}

.welcome {
    font-size: 30px;
    border: solid 5px;
    padding: 15px;
    font-weight: 600;
    display:inline-block;
}

我为你的JsFiddle添加了一个特定的宽度/高度，然后我给它了display:table-cell;属性的背景类，你的欢迎课几乎保持不变。从本质上讲，我只是添加了上面提到的显示方法，然后取出了填充效果。

另一个选择是不要弄乱高度和宽度：

DEMO

这只是将它们留作百分比，并且不会添加或更改我之前给出的示例中的任何内容。

编辑：这是JsFiddle，其中包含所请求的宽度/高度属性。

让您更好地了解显示方法的工作原理。 Almanac是一个很好的参考。

响应中心Vert＆amp; Hori a Div在另一个Div中宽度：100％和填充底部：100％

3 个答案: