css - 如何在 div 中将绝对定位的元素居中？

Question

我需要在窗口的中心放置一个div(with position:absolute;) 元素。但是我这样做有问题，因为宽度是未知的。

我试过这个。但它需要调整，因为宽度是响应式的。

.center {
  left: 50%;
  bottom: 5px;
}

我该怎么做？

score 2043 · Accepted Answer

这对我有用：

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

score 1486 · Accepted Answer

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

score 1057 · Accepted Answer

响应式解决方案

如果您不需要支持 IE8 及更低版本，那么对于响应式设计或未知尺寸来说，这是一个很好的解决方案。

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

这是一个 JS 小提琴

线索是，这left: 50%是相对于父元素，而translate变换是相对于元素的宽度/高度。

这样，您就有了一个完美居中的元素，子元素和父元素的宽度都可以灵活调整。奖励：即使孩子比父母大，这也有效。

您也可以使用它垂直居中（同样，父母和孩子的宽度和高度可以完全灵活（和/或未知））：

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

请记住，您可能还需要transform供应商前缀。例如-webkit-transform: translate(-50%,-50%);

score 69 · Accepted Answer

<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>
  This text is centered.
</div>

这将使 div 内的所有对象居中，位置类型为静态或相对。

score 51 · Accepted Answer

我只是想补充一下，如果有人想用一个 div 标签来做，那么这里是出路：

以. width_900px

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

width在这种情况下，应该事先知道。

score 38 · Accepted Answer

绝对中心

HTML：

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS：

.parent {
  position: relative;
}

.child {
  position: absolute;
  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

演示：http: //jsbin.com/rexuk/2/

它在 Google Chrome、Firefox 和Internet Explorer 8中进行了测试。

score 37 · Accepted Answer

响应式解决方案

假设 div 中的元素，是另一个 div...

此解决方案工作正常：

<div class="container">
  <div class="center"></div>
</div>

容器可以是任意大小（必须是相对位置）：

.container {
    position: relative; /* Important */
    width: 200px; /* Any width */
    height: 200px; /* Any height */
    background: red;
}

元素（div）也可以是任意大小（必须小于容器）：

.center {
    position: absolute; /* Important */
    top: 50%; /* Position Y halfway in */
    left: 50%; /* Position X halfway in */
    transform: translate(-50%,-50%); /* Move it halfway back(x,y) */
    width: 100px; /* Any width */
    height: 100px; /* Any height */
    background: blue;
}

结果将如下所示。运行代码片段：

.container {
    position: relative;
    width: 200px;
    height: 200px;
    background: red;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: blue;
}

<div class="container">
    <div class="center"></div>
</div>

我发现它很有帮助。

score 36 · Accepted Answer

这适用于垂直和水平：

#myContent{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

如果你想使父元素的中心，设置父相对的位置：

#parentElement{
    position: relative
}

对于垂直居中对齐，将高度设置为您的元素。感谢劳尔。
如果要使父元素居中，请将父元素的位置设置为相对

score 25 · Accepted Answer

在寻找解决方案时，我得到了以前的答案，并且可以使内容以Matthias Weiler 的答案为中心，但使用text-align：

#content{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

它适用于 Google Chrome 和 Firefox。

score 25 · Accepted Answer

25

如果您也需要水平和垂直居中：

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

于 2019-02-15T08:50:03.753 回答

score 17 · Accepted Answer

我知道这个问题已经有了一些答案，但我从来没有找到一个几乎适用于所有类的解决方案，它也很有意义并且很优雅，所以这是我在调整了一堆之后的看法：

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

它是说给我 atop: 50%和 a left: 50%，然后在 X/Y 轴上转换（创建空间）到-50%值，在某种意义上“创建镜像空间”。

因此，这会在 div 的所有四个点上创建相等的空间，它始终是一个盒子（有四个边）。

这会：

无需知道父母的高度/宽度即可工作。
响应式工作。
在 X 或 Y 轴上工作。或者两者兼而有之，就像我的例子一样。
我想不出它不起作用的情况。

score 16 · Accepted Answer

这适用于您希望在容器元素中心拥有的绝对定位元素的任何随机未知宽度：

演示

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

score 15 · Accepted Answer

Flexbox可用于将绝对定位的 div 居中。

display: flex;
align-items: center;
justify-content: center;

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

score 15 · Accepted Answer

这是其他答案的混合，对我们有用：

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

score 8 · Accepted Answer

据我所知，对于未知的宽度，这是不可能实现的。

你可以 - 如果这在你的场景中有效 - 绝对定位一个宽度和高度为 100% 的不可见元素，并使用边距使元素居中：自动和可能的垂直对齐。否则，您将需要 JavaScript 来执行此操作。

score 7 · Accepted Answer

我想补充一下bobince 的回答：

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

改进： /// 这使得水平滚动条不会在居中的 div 中出现大元素。

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>

score 5 · Accepted Answer

这是一个有用的jQuery插件来做到这一点。我在这里找到了。我认为纯粹使用 CSS 是不可能的。

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height();
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
            el.css(css)
    });
};

score 5 · Accepted Answer

先前响应式解决方案的Sass / Compass版本：

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

score 5 · Accepted Answer

这对我有用：

<div class="container><p>My text</p></div>

.container{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

score 4 · Accepted Answer

我首选的居中方法：

position: absolute;
margin: auto;
width: x%

绝对块元素定位
保证金自动
相同的左/右，上/下

JSFiddle 在这里。

score 4 · Accepted Answer

只需用新的 div 包装您的内容并使用 display flex 然后使用 align-items: center; 和 justify-content: center; 看一看...

<div class="firstPageContainer">
  <div class="firstPageContainer__center"></div>
</div>

.firstPageContainer{
  display: flex;
  width: 1000px;
  height: 1000px;
  justify-content: center;
  align-items: center;
  background-color: #FF8527;
}

.firstPageContainer__center{
  position:absolute;
  width: 50px;
  height: 50px;
  background-color: #3A4147;
}

score 4 · Accepted Answer

4

left:0;
right: 0;
margin: 0 auto;

这工作正常。

于 2022-01-17T22:04:13.463 回答

score 3 · Accepted Answer

#container
{
  position: relative;
  width: 100%;
  float: left
}

#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

score 3 · Accepted Answer

HTML：

<div id='parent'>
  <div id='child'></div>
</div>

CSS：

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

_{我知道我已经提供了答案，而我之前的答案以及其他给出的答案都可以正常工作。但我过去曾使用过它，它在某些浏览器和某些情况下效果更好。所以我想我也会给出这个答案。我没有“编辑”我之前的答案并添加它，因为我觉得这是一个完全独立的答案，我提供的两个答案不相关。}

score 3 · Accepted Answer

这个问题的公认解决方案不适用于我的情况......

我正在为一些图像做一个标题，我用这个解决了它：

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
    position: relative;
    width: 325px;
    display: block
}


figcaption{
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;

    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
}

<figure>
    <img  src="https://picsum.photos/325/600">
    <figcaption>
        But as much
    </figcaption>
</figure>

score 2 · Accepted Answer

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

score 1 · Accepted Answer

这是我想出的让 DIV 准确浮动在页面中心的技巧。当然它真的很难看，但它适用于所有浏览器。

点和破折号

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

清洁器

哇，那五年就这么过去了，不是吗？

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
    <table style="position:fixed" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="padding:10px">
                    <img src="Happy.PM.png">
                    <h2>Stays in the Middle</h2>
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

score 1 · Accepted Answer

HTML：

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS：

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

这和更多的例子在这里。

score 1 · Accepted Answer

一种简单的方法，对我来说可以将未知宽度的块水平居中：

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

#block {
    display: inline-block;
}

可以将 text-align 属性添加到#block 规则集中以独立于块的对齐方式来对齐其内容。

这适用于最新版本的 Firefox、Chrome、Internet Explorer、Edge 和 Safari。

score 1 · Accepted Answer

如果元素具有width并且height

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

score 1 · Accepted Answer

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

score 0 · Accepted Answer

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

score 0 · Accepted Answer

您还可以创建以,和propertiesdiv#centered为中心的中间件框，然后将主要内容设置为其子 with box 并以set 为其中间件父框居中absoluteleftrightwidthdivdisplay:inline-blocktext-align:center

#container {
  position: relative;
  width: 300px;
  height: 300px;
  border: solid 1px blue;
  color: #DDDDDD;
}

#centered {
  position: absolute;
  text-align: center;
  margin: auto;
  top: 20px;
  left: 0;
  right: 0;
  border: dotted 1px red;
  padding: 10px 0px;
}

#centered>div {
  border: solid 1px red;
  display: inline-block;
  color: black;
}

<div id="container">
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world
  hello world hello world

  <div id="centered">
    <div>
      hello world <br/>
      I don't know my width<br/>
      but I'm still absolute!
    </div>
  </div>
</div>

score 0 · Accepted Answer

由于我不想更改容器/包装器元素的样式，因此没有一个解决方案对我有用。这段代码对我有用：

position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;

score -1 · Accepted Answer

您可以将图像放在 div 中并添加 div id 并让该 div 的 CSS 具有text-align:center：

HTML：

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS：

#intro_img {
    text-align: center;
}

score -4 · Accepted Answer

我使用了类似的解决方案：

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

其中“X”是我要显示的 div 宽度的一半。它适用于所有浏览器。

score -4 · Accepted Answer

尽量不要使用 CSS 的阴暗面。避免使用负值作为边距。我知道有时你被迫做一些糟糕的事情，比如 a margin-left: -450px，但也许你可以做一些类似的事情right: 450px。这只是我的工作方式。

css - 如何在 div 中将绝对定位的元素居中？

37 回答 37

响应式解决方案

响应式解决方案

Related

Reference