使 DIV 水平和垂直居中

有没有一种方法可以实现 垂直和水平的 DIV 居中但是，这很重要，那就是 当窗口小于内容时，内容不会被剪切 Div 必须具有背景颜色、宽度和高度。

我总是用绝对定位和负边距来居中 div，就像上面提供的例子一样。但问题是，它把内容从顶部剪掉了。是否有将 div 居中的方法。没有这个问题的内容？

我这里有一个例子: http://jsbin.com/iquviq/1/edit

CSS:

body { margin: 0px; }


.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}


/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/




.content {
width: 200px;
height: 600px;
background-color: blue;


position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}

HTML:

<div class="background">
<div class="content"> some text </div>
</div>

我的问题不是“如何使一个元素水平和垂直居中?”我的问题以前被问过。(只是检查日期)。2-我的问题问得非常清楚，黑色作为条件: “当窗口小于内容时，内容将不会被删除。”

484286 次浏览
小开

下面是一个演示: Http://www.w3.org/style/examples/007/center-example

A 方法 (JSFiddle 的例子)

CSS:

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}

HTML:

<div id="content">
Content goes here
</div>

另一种方法 (JSFiddle 的例子)

CSS

body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}

超文本标示语言

<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
小开

你可以比较不同的方法在这个页面很好地解释: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

他们推荐的方法是在不能居中的内容之前添加一个空的浮动元素，然后清除它。它没有你提到的缺点。

我分叉了您的 JSBin 来应用它: http://jsbin.com/iquviq/7/edit

超文本标示语言

<div id="floater">
</div>


<div id="content">
Content here
</div>

CSS

#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}


#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
小开

我不相信有一个方法可以做到这一点与 CSS 严格。原因在于这个问题的 “重要”限定符: 强制父元素展开其子元素的内容。

我的猜测是，您将不得不使用一些 JavaScript 来查找子代的高度，并进行调整。

因此，使用这个 HTML:

<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>

这个 CSS:

.parentElement {
position:relative;
width:960px;
}
.childElement {
position:absolute;
top:50%;
left:50%;
}

这个 jQuery 可能很有用:

$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});

记住要正确地加载 jQ，无论是在受影响元素下面的主体中，还是在 $(document).ready(...)内部的头部中。

小开
最佳答案

在尝试了很多事情之后，我找到了一种行之有效的方法。如果它对任何人有用，我在这里分享它。你可以在这里看到它的工作原理: http://jsbin.com/iquviq/30/edit

.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}
小开

对于 现代浏览器

当你有这种奢侈的时候，也有弹性盒，但是在写这篇文章的时候并没有得到广泛的支持。

HTML:

<div class="content">This works with any content</div>

CSS:

.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

在 Codepen或 JSBin上进一步修补它

有关旧版浏览器的支持，请查看此线程中的其他地方。

小开

对于任何浏览器大小，不管 div 大小如何，实现这一点的合法方法是:

   div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}

激活代码


提交答案