Question

我将一个div垂直居中放置在另一个div中。

我曾尝试使用网站中某些答案中提到的表格单元格，但这无法正常工作，我总是将div放在顶部

CSS

.height1 {
  height:60px;
  line-height:60px
}
.row {
  border: 1px solid black;

}
.indicator {
  width :20px;
  height:20px;
  background-color: black;
  vertical-align: middle
}
.badge {
  display:inline-block;
}
.parent {
  display: table-cell;
}

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-8 height1"> TEXTE</div>
        <div class="col-md-4 parent">
          <div class="badge indicator">testing</div>
      </div>
    </div>
</div>

这里是demo

Answer 1

请参阅下面的更新的代码段。

.height1, .parent {
  line-height:60px
}
.row {
  border: 1px solid black;

}
.indicator {
  height:20px;
  background-color: black;
  vertical-align: middle
}
.badge {
  display:inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-md-8 height1"> TEXTE</div>
        <div class="col-xs-4 col-md-4 parent">
          <div class="badge indicator">testing</div>
      </div>
    </div>
</div>

Answer 2

HTML

<div class="parent">
    <div class="child"></div>
</div>

通过使用以下方法，您可以获得该方法。这将是维护div的更好解决方案。

.parent {
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: relative;
}

.child {
    height: 50px;
    width: 50px;
    background-color: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

引导网格内垂直居中div

2 个答案: