Question

有没有办法垂直和水平居中DIV ，但重要的是，当窗口小于内容时，内容不会被剪切 div必须具有背景颜色，宽度和高度。

我总是将div与绝对定位和负边距居中，如提供的示例所示。但它存在的问题是它会削减内容。有没有一种方法可以在没有这个问题的情况下使div .content居中？

我在这里有一个例子：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>

我的问题不是“如何水平和垂直居中一个元素？”的问题.1我之前曾问过我的问题。（只是查看日期）。 2-我的问题非常清楚，并以黑色为条件：“当窗口小于内容时，内容不会被删除”

Answer 1

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

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

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
    }

Answer 2

对于现代浏览器

当你拥有那种奢侈品时。还有flexbox，但在撰写本文时并没有广泛支持。

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

上进一步修补它

对于较早的浏览器支持，请查看此主题中的其他位置。

Answer 3

这是一个演示： http://www.w3.org/Style/Examples/007/center-example

方法（JSFiddle example）

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 example）

CSS

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

HTML

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

Answer 4

无论任何浏览器大小的div大小，合法的方法是：

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

Live Code

Answer 5

我不相信有一种方法可以严格使用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(...)内部的头部。

Answer 6

您想要设置样式

margin: auto;

删除定位样式（顶部，左侧，位置）

我知道这将是恐怖的中心，但我不确定垂直！

Answer 7

您可以比较此页面上非常好解释的不同方法：http://blog.themeforest.net/tutorials/vertical-centering-with-css/

他们建议的方法是在您不能居中的内容之前添加一个空的浮动元素并清除它。它没有你提到的缺点。

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

<强> HTML

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

水平和垂直居中DIV

7 个答案:

对于现代浏览器