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

Posted 2023-03-05

【中文标题】水平和垂直居中 DIV [重复]

【英文标题】：Center a DIV horizontally and vertically [duplicate]

【发布时间】：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/…

【参考方案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 会对父元素进行必要的调整。

【参考方案6】：

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

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

我 fork 你的 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：jsbin.com/uhukuk/1/edit，它没有居中。我错过了什么？

@Nrc 您需要将 CSS 添加到您的 JSBin... 另外，不要将 content 放在 floater 中，而是放在它之后。请参阅我的 JSBin 以获取工作示例：jsbin.com/iquviq/7/edit

您的 JSBin 在实践中有效，但如果我将代码复制粘贴到任何 html 中，它就不会。我尝试了很多东西！我不明白。另一方面，我不明白你为什么把漂浮物放在外面。在您提到的博客中，它显然在里面。我真的很困惑。

我将你的代码复制粘贴到 jsFiddle 中：jsfiddle.net/6uAMm 如果我把它放在任何 html 中，我就是这样看到的。

【参考方案7】：

你想设置样式

margin: auto;

并移除定位样式（上、左、位）

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

【讨论】：

边距：显然是内容div上的自动

我提供了一个容易尝试的地方：jsbin.com/iquviq/1/edit。我认为它不起作用