提问



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


我试过这个。但需要根据宽度的响应进行调整。


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


有任何想法吗?

最佳参考




<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>



这对我有用:




#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>



响应式解决方案



如果您不需要支持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>



非常好的帖子..只是想添加如果有人想用单个div标签然后在这里出路:


width900px


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


在这种情况下,人们应事先知道width

其它参考1


绝对中心


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/[46]


在Google Chrome,Firefox和IE8中测试过


希望这可以帮助 :)

其它参考2


这项工作适用于纵向和横向


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


如果你想要父元素的元素中心,设置父亲的位置


 #parentElement{
      position:relative
  }


编辑:



  • 用于垂直居中对齐元素的高度。感谢@Raul

  • 如果您想要父元素的元素中心,请将父元素的位置设置为相对


其它参考3


寻找解决方案我得到了上面的答案,可以使内容集中
Matthias Weiler回答但使用text-align。


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


使用chrome和Firefox。

其它参考4


我知道这个问题已经有了一些答案,但是我从来没有找到一个可以在几乎所有类别中都有效的解决方案,这些解决方案也很有意义,而且很优雅,所以这是我在调整一堆后的看法:




.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>



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


您可以 - 如果在您的场景中有效 - 绝对定位具有100%宽度和高度的不可见元素,并使用margin:auto和可能vertical-align使元素居中。否则,你将需要Javascript来做到这一点。

其它参考5


我想补充一下@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>

其它参考6


这是一个有用的jQuery插件。在这里找到。我不认为纯粹使用CSS [47]


/**
 * @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)
    });
};

其它参考7


我首选的定心方法:


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



  • 绝对块元素定位

  • margin auto

  • 相同的左/右,上/下



JSFiddle这里[48]

其它参考8


上面的响应式解决方案的sass/指南针版本:


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

其它参考9


这对我有用:


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

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

其它参考10


我知道我已经提供了答案,我之前的答案以及其他人给出的答案都很好。但我过去曾经使用过它,它在某些浏览器和某些情况下效果更好。所以我认为id也给出了这个答案。我没有编辑我以前的答案并添加它,因为我觉得这是一个完全独立的答案,而我提供的两个答案并不相关。


HTML:


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


CSS:


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

其它参考11


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

其它参考12


适用于您希望在容器元素中心的绝对定位元素的任意随机未知宽度。


演示 [49]


<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;
}

其它参考13


这是一个让我觉得让DIV正好漂浮在页面中心的技巧。适用于IE和Chrome。诀窍在于表格单元的垂直对齐和固定定位。


<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>

其它参考14


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;
}


这里有更多例子[50]

其它参考15


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/[51]

其它参考16


您可以将图像放在div中并添加div id并为该div添加CSS
text-align:center


HTML:


<div id="intro_img">

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

</div>





CSS:


#intro_img {
    text-align:center;
}

其它参考17




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

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



一种简单的方法,可以让我水平居中一个未知宽度的块:


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





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


可以将文本对齐属性添加到#block规则集以独立于块的对齐来对齐其内容。


这适用于最新版本的Firefox,Chrome,IE,Edge和Safari。

其它参考18


我使用过类似的解决方案:


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


其中X是我想要显示的div宽度的一半。在所有浏览器中都适用于我。

其它参考19


尽量不要使用CSS的黑暗面。避免对边距使用负值。我知道有时你会被迫做margin-left: -450px之类的糟糕事情,但可能你会做right: 450px之类的事情。这只是我的工作方式。