logo标签列表

水平垂直居中一个DIV

htmlcsscenter
195

有没有一种方法可以让一个

在垂直和水平方向上居中，但是，很重要的是，当窗口比内容小时，内容不会被切断。这个
必须有一个背景颜色和宽度高度。

我通常使用绝对定位和负边距来居中

，就像示例提供的那样。但它的问题是会削减顶部的内容。有没有一种方法可以居中
而不会出现这个问题呢？

我在这里提供了一个示例可以尝试：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- 我的问题非常清楚地说明并列出了条件：“当窗口小于内容时，内容不会被裁剪”。

我的问题与“最佳方法在页面上垂直和水平居中<div>”不同。正如我在开头非常清楚地问到的那样，“当窗口小于内容时，内容不会被裁剪”。 - Nrc
4
@Josh Crozier：我的问题不是“如何水平垂直居中元素”的重复。1- 我的问题是两年前提出的，而另一个问题是一年前提出的。2- 我的问题非常清楚地表达了：“当窗口小于内容时，内容不会被裁剪”。 - Nrc
请查看此教程，了解如何使用CSS水平和垂直对齐div：https://frontendguruji.com/blog/how-to-center-a-div-horizontally-and-vertically-using-css/ - Mandeep Pasbola
6个回答
289

适用于现代浏览器

当您拥有这种选择时。还有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上进一步调试。

如需支持旧浏览器，请查看本主题的其他内容。

1
它不能满足条件：“当窗口小于内容时，内容不会被裁剪”。我在这里进行了测试：http://jsfiddle.net/9cLamaoL/ - Nrc
1
为什么你必须使用 transform: translate？ - Robert
根据我的理解，position: absolute 会将锚点带到元素的左上角。通过使用 transform: translate(-50%, -50%)，我们将锚点带到元素的中心。这并不是必需的，但如果您不使用 translate，为了达到相同的效果，您的 top 和 left 值会有所不同。 - Lam Le
191

经过尝试，我找到了一种有效的方法。如果对任何人有用，我在这里分享。您可以在此处查看其工作状态：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;
}
3
谢谢，希望有一个没有 table-cell 的版本。 - devlord
谢谢。哪些浏览器支持这种技术？有没有任何主要的现代或旧版浏览器不支持？移动浏览器呢？ - AlcubierreDrive
1
@AlcubierreDrive：我可以在所有主要现代浏览器和iOS上测试它，而且它运行良好。我无法在Android或Windows 8上进行测试。如果有人告诉我就好了。在IE8中，只有.content比浏览器小时才能工作。它不适用于IE7及其之前的版本。截至2014年1月：IE8占3.1％，IE7占0.4％http://www.w3schools.com/browsers/browsers_explorer.asp - Nrc
2
可能有点晚了，但这也适用于win8和win8.1（IE 10和11）。顺便说一下，谢谢。 - BudBrot
3
确保父级（容器）div的定位设置为相对定位；.parent {position:relative;} - Sean12
如果内容的位置设置为绝对定位，则父容器需要将其位置设置为相对定位 :) - Anthonius
56

这是一个演示：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>
第一种方法适用于文本，但它适用于div吗？我在这里尝试了一下，但出了些问题：http://jsbin.com/iquviq/12/edit - Nrc
你的例子对于居中文本很好，但是我要求将一个div水平和垂直居中。你试过用div来实现吗？ - Nrc
这两个例子都是使用div元素（<div id="content">和<div id="main">）。 在这些div元素中，您可以插入任何内容（文本、图像等）。 - MultiformeIngegno
这很好，可以将文本或图像居中。但我所问的与此非常不同。有人能将其应用于所要求的代码：将具有背景颜色、宽度和高度的 div 居中吗？ - Nrc
7

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

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

Live Code

1
你没有回答“当窗口小于内容时，内容不会被裁剪”的问题。另一部分与我之前发布的答案相同。 - Nrc
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;
}
我在这里询问之前尝试了那个教程中的所有方法，但都没有成功。我只是复制粘贴了那个方法3到这里：http://jsbin.com/uhukuk/1/edit，但它并没有居中显示。我错过了什么吗？ - Nrc
@Nrc 你需要在你的JSBin中添加CSS... 另外，不要将 content 放在 floater 内部，而是放在它后面。查看我的JSBin以获取一个可工作的示例：http://jsbin.com/iquviq/7/edit - clement g
你的 JSBin 实例运行正常，但如果我将代码复制粘贴到任何 HTML 中，它就无法工作。我尝试了很多方法！我不明白。另一方面，我不明白为什么你把 floater 放在外面。在博客中，你提到它明显在内部。我真的很困惑。 - Nrc
我在jsFiddle中复制粘贴了你的代码：http://jsfiddle.net/6uAMm/ 如果我把它放到任何html中，就是这样看到的。 - Nrc
1

我不相信有一种严格使用CSS的方法来实现这一点。原因是你在问题中使用了"important"限定符：强制父元素随其子元素的内容扩展。

我的猜测是，您将不得不使用一些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，可以将其放在受影响元素下方的 body 中，或者放在 head 中的 $(document).ready(...) 内。

我刚刚复制/粘贴了你的代码，但好像并没有起作用。我是不是漏掉了什么？http://jsbin.com/owuwem/1/edit - Nrc
我已经拆分了代码，看起来它能正常工作... http://jsbin.com/owuwem/2/edit 希望这对你有帮助！ - oomlaut
您的选项居中垂直和水平，但我认为“当窗口小于内容时，内容将被裁剪？”给子元素一个高度：http://jsbin.com/owuwem/4/edit - Nrc
在CSS中从.parentElement中删除height:100%;后，我为子元素分配的任何高度值都将反映在父元素中。上述JavaScript将对父元素进行必要的调整。 - oomlaut
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接