我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。

我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。

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

我怎样才能做到这一点?


当前回答

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

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

其他回答

绝对中心

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中进行了测试。

只需使用一个新的div包装您的内容并使用display flex,然后使用align-items: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;
}

尽量不要使用CSS的阴暗面。避免使用负值作为边距。我知道有时候你会被迫做一些糟糕的事情,比如左边距:-450px,但你可能会做一些右边距:450px。这只是我的工作方式。

这里有一个有用的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)
    });
};

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

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