协慌网

 登录 贡献 社区

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

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

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

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

有任何想法吗？

答案

这对我有用： 

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

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

响应性解决方案

如果您不需要支持 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%的线索是left: 50%是相对于父级的，而translate转换是相对于元素的宽度 / 高度。

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

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

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

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