Question

所以，我正在使用跟随css来对齐页面中心的div容器

<div class="flex-container">
    <div class="conatiner"> 
       Something centered
    </div>
</div>   

.flex-container{
 text-align: center;
 display: flex;
 height: 100%;
 padding: 0;
 margin: 0;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}
  .conatiner{
  position: absolute;
  background-color: #fafafa;
  text-align: left;
}

这是JSfiddle。

如您所见，内部容器从50％标记的宽度开始。

如何更改它以使容器（无论宽度如何）始终使用flex在页面的中心？

由于

Answer 1

Andrei指出的更正......谢谢芽

.conatiner {
  position: absolute;
  background-color: #fafafa;
  text-align: left;
  left: 50%; 
  transform: translateX(-50%);
}

引用Andrei

＆＃34;如果您需要使用position：absolute，那么您将从文档流中取出元素，从而有效地从中删除flex。所以绝对定位的元素不再与flex有任何关系，你需要使用盒子模型定心方法＆＃34;

请参阅DEMO

用flex中心div

1 个答案: