162

有没有办法使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-我的问题问得很清楚，而且是黑色的：“当窗口小于内容时，内容不会被剪切”

4

7 回答 7

225

对于现代浏览器

当你拥有那种奢侈时。还有 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上进一步修改它

对于较旧的浏览器支持，请查看此线程中的其他位置。

于 2014-05-16T20:00:31.293 回答
181

在尝试了很多事情之后，我找到了一种可行的方法。如果对任何人有用，我在这里分享。你可以在这里看到它的工作：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;
}
于 2013-02-11T16:49:59.670 回答
55

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

一种方法（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
}

HTML

<div id="wrapper">
<div id="main">
    Content goes here
</div>
</div>
于 2013-01-02T14:53:39.947 回答
6

无论浏览器大小的 div 大小如何，这样做的合法方法是：

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

实时代码

于 2014-11-12T06:00:19.347 回答
1

您可以在此页面上很好地比较不同的方法：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;
}
于 2013-01-02T14:54:45.583 回答
1

我不相信有办法严格使用 CSS 来做到这一点。原因是您对问题的“重要”限定词：强制父元素使用其子元素的内容进行扩展。

我的猜测是你将不得不使用一些 JavaScript 来找到孩子的身高，并进行调整。

因此，使用此 HTML：

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

这个CSS：

.parentElement {  
  位置：相对；
  宽度：960 像素；
}
.childElement {
  位置：绝对；
  最高：50%；
  左：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(...).

于 2013-01-02T16:01:45.423 回答
-4

你想设置风格

margin: auto;

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

我知道这会以horrizontaly为中心，但我不确定垂直！

于 2013-01-02T14:46:50.240 回答