Question

我的主div是position:relative;，而子元素是绝对元素。我想将它们水平居中，但是我不了解发生了什么奇怪的事情。

我如何在flex中将绝对元素水平居中？有什么想法吗？

示例图片

body{
  background:tomato;
}
.block{
  position:relative;
  width:700px;
  background:white;
  padding:10px;
}
.block-item{
  width:60px;
  height:60px;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
}

.block-item:nth-of-type(1){
  left:0;
  background:lightgreen;
}
.block-item:nth-of-type(2){
  left:5%;
  top:25px;
  background:lightblue;
}
.block-item:nth-of-type(3){
  left:10%;
  background:lightgray;
}

  <div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>


    </div>
  </div>

Answer 1

更新：您也可以使用margin或position relative

body{
  background:tomato;
}
.block{
  position:relative;
  width:100%;
  background:white;
  padding:30px 10px 50px 10px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.block-item{
  width:60px;
  height:60px;
  position:relative;
}

.block-item:nth-of-type(1){
  background:lightgreen;
  left:0;
}
.block-item:nth-of-type(2){
    left: -2%;
    top: 20px;
    background: lightblue;
}
.block-item:nth-of-type(3){
  left: -5%;
  background:lightgray;
}

<div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>
    </div>
  </div>

Answer 2

您在这里不需要绝对位置。您只需要调整一些边距即可实现此布局：

body {
  background: tomato;
}

.block {
  background: white;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-item {
  width: 60px;
  height: 60px;
}

.block-item:nth-of-type(1) {
  margin-right: -10px;
  background: lightgreen;
}

.block-item:nth-of-type(2) {
  margin-right: -10px;
  margin-top: 25px;
  background: lightblue;
}

.block-item:nth-of-type(3) {
  background: lightgray;
}

<div id="main">
  <div class="block">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
  </div>
</div>

Answer 3

使用position: relative代替 absolute ，并将 flexbox 添加到block元素中。还可以使用像素而不是百分比来调整 left -请参见下面的演示

body {
  background: tomato;
}

.block {
  position: relative;
  width: 700px;
  background: white;
  padding: 10px;
  display: flex; /* Flexbox here */
  justify-content: center;
}

.block-item {
  width: 60px;
  height: 60px;
  /*position: absolute;*/
  position: relative;
  /*display: flex;
  align-items: center;
  justify-content: center;*/
}

.block-item:nth-of-type(1) {
  left: 0;
  background: lightgreen;
}

.block-item:nth-of-type(2) {
  left: -20px; /* CHANGED */
  top: 25px;
  background: lightblue;
}

.block-item:nth-of-type(3) {
  left: -50px; /* CHANGED */
  background: lightgray;
}

<div id="main">
  <div class="block">
    <div class="block-item"></div>
    <div class="block-item"></div>
    <div class="block-item"></div>
  </div>
</div>

Answer 4

body{
  background:tomato;
}
.block{
  position:relative;
  width:700px;
  background:white;
  padding:10px;
}
.block-item{
  left: 50%;
  transform: translateX(-50%);
  width:60px;
  height:60px;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
}

.block-item:nth-of-type(1){
  background:lightgreen;
}
.block-item:nth-of-type(2){
  top:25px;
  background:lightblue;
}
.block-item:nth-of-type(3){
  background:lightgray;
}

  <div id="main">
    <div class="block">
      <div class="block-item"></div>      
      <div class="block-item"></div>      
      <div class="block-item"></div>


    </div>
  </div>

Answer 5

Try this Fiddle

.block{
 position:relative;
 width:700px;
 background:white;
 padding:10px;
 display:flex;
 align-items:center;
 justify-content:center;  
 }

Answer 6

您可以如下更改css。

body{
    background:tomato;
}
.block{
    position:relative;
    width:100%;
    background:white;
    padding:10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.block-item{
    width:33%;
    height:60px;
    margin: 0 auto;
}

.block-item:nth-of-type(1){
    left:0;
    background:lightgreen;
}
.block-item:nth-of-type(2){
    left:5%;
    top:25px;
    background:lightblue;
}
.block-item:nth-of-type(3){
    left:10%;
    background:lightgray;
}

并且html中没有变化

Answer 7

只需移除position:absolute并使用position:relative并调整左上角，然后将主div居中如下即可。希望该解决方案对您有所帮助。

body {
    background: tomato;
}
.block {
    max-width: 700px;
    position: relative;
    padding: 10px;
    text-align: center;
    background: white;
}
.block-item {
    width: 60px;
    height: 60px;
    position: relative;
    display: inline-block;
    left: -15px;
    margin-bottom: 10px;
}
.block-item:nth-of-type(1) {
    left: 0;
    background: lightgreen;
}
.block-item:nth-of-type(2) {
    background: lightblue;
    top: 15px;
}
.block-item:nth-of-type(3) {
    background: lightgray;
    right: 30px;
    left: inherit;
}

<div id="main">
    <div class="block">
        <div class="block-item"></div>
        <div class="block-item"></div>
        <div class="block-item"></div>
    </div>
</div>

如何使用flex将绝对元素居中？

7 个答案: