水平和垂直居中 DIV [重复]答案

【问题标题】：Center a DIV horizontally and vertically [duplicate]水平和垂直居中 DIV [重复]
【发布时间】：2012-12-16 22:26:43
【问题描述】：

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

【问题讨论】：

我的问题不同于：“在页面上垂直和水平居中
的最佳方式？”。正如我一开始问得很清楚的“当窗口小于内容时，内容不会被剪切”
@Josh Crozier：我的问题与“如何将元素水平和垂直居中？” 1- 我的问题是两年前提出的。另一个问题是一年前提出的。 2-我的问题问得很清楚而且是黑色的：“当窗口小于内容时，内容不会被剪切”
查看本教程以使用 CSS 水平和垂直对齐 div：frontendguruji.com/blog/…

标签： html css center

【解决方案1】：

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

【讨论】：

很高兴有一个没有表格单元格的版本，谢谢。
谢谢。哪些浏览器支持这种技术？是否不支持任何主要的现代或旧版浏览器？移动浏览器呢？
@AlcubierreDrive：我可以在所有主要的现代浏览器和 iOS 上测试它，它运行良好。我无法在 Android 和 Windows 8 中进行测试。如果有人告诉我，我将不胜感激。在 IE8 中，它仅在 .content 小于浏览器时才有效。它在 IE7 及之前的版本中不起作用。 2014年1月：IE8为3.1%，IE7:0,4%w3schools.com/browsers/browsers_explorer.asp
可能有点晚了，但这也适用于 win8 和 win8.1（IE 10 和 11）。谢谢顺便说一句。
还要确保父（容器）div 的位置设置为相对； .parent {位置：相对；}

【解决方案2】：

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

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

Live Code

【讨论】：

您也没有回答“窗口小于内容时内容不会被剪切” 其他部分与我之前发布的答案相同

【解决方案3】：

对于现代浏览器

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

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

【讨论】：

不符合条件：“窗口小于内容时内容不会被剪切”我这里测试一下：jsfiddle.net/9cLamaoL

【解决方案4】：

这是一个演示： 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>

【讨论】：

第一种方法适用于文本，但它适用于 div 吗？我在这里试了一下，出了点问题：jsbin.com/iquviq/12/edit
您的示例适合居中文本，但我要求将 div 水平和垂直居中。你用 div 试试这个吗？
这两个例子是 div（
和
）。在 div 中，您可以插入任何您想要的内容（文本、图像等）。
这非常适合将文本或图像居中。但我问的是非常不同的。任何人都可以将其应用于所问的代码：居中一个具有背景颜色、宽度和高度的 div？
最佳答案....

【解决方案5】：

我不相信有办法严格使用 CSS 来做到这一点。原因是您对问题的 "important" 限定词：强制父元素随其子元素的内容展开。

我的猜测是你将不得不使用一些 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(...) 的头部内部。

【讨论】：

我只是在这里复制/粘贴您的代码，它似乎不起作用。我错过了什么吗？ jsbin.com/owuwem/1/edit
我已经破解了代码，它似乎可以工作...jsbin.com/owuwem/2/edit希望这会有所帮助！
您的选项垂直和水平居中，但我认为“当窗口小于内容时，内容会被剪切？”给孩子一个身高：jsbin.com/owuwem/4/edit
从css中的.parentElement中删除height:100%;后，我分配给孩子的任何高度值都会被父母反映。上面的 JavaScript 会对父元素进行必要的调整。