块

Question

我正在尝试将红色块水平和垂直居中，如下图所示，但遗憾的是红色块位于错误的位置。我使用bootstrap4.Сan有人说出了什么问题？

.parent {
  position: relative;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row header-layout">
    *Some content*
  </div>

  <div class="row content-layout">
    <div class="col-6 left-side">
      *Some content*
    </div>

    <div class="col-6 right-side">
      <div class="row right-title">
        *Some Text*
      </div>
      <div class="row parent">
        <div class="child">
          *Some content*
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用flexbox轻松地对元素进行居中。

以下是Flexbox

的完整指南

.parent {
  height: 100px;
  width: 100px;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center; }
  
.child {
  height: 50px;
  width: 50px;
  background: red; }

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

Answer 2

我只是更改了一些bootstrap类和css。希望它有所帮助：）

div {
  border: thin solid black;
}

.child {
  position: relative;
  margin: auto;
  width: 60px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row header-layout">
    *Container content*
  </div>

  <div class="row content-layout">
    <div class="col-6 left-side">
      *left content*
    </div>

    <div class="col-6 right-side">
      <div class="row right-title">
        *Right Text*
      </div>
      <div class="row">
        <div class="child">
          *Child content*
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

您可以使用新的 Bootstrap 4 flexbox实用程序 ..

执行此操作

<div class="container-fluid h-100 d-flex flex-column">
  <div class="row header-layout">
    *Some content*
  </div>

  <div class="row content-layout flex-grow">
    <div class="col-6 left-side d-flex flex-column">
        <div class="row">
            <div class="col-12 text-center">content</div>
        </div>
        <div class="row flex-grow">
            <div class="col-12 text-center my-auto">content</div>
        </div>
    </div>

    <div class="col-6 right-side d-flex flex-column">
      <div class="row right-title"> 
        <div class="col-12 text-center">title</div>
      </div>
      <div class="row parent flex-grow">
        <div class="child col-6 mx-auto my-auto">
          <div class="card card-block">child</div>
        </div>
      </div>
    </div>
  </div>
</div>

http://www.codeply.com/go/6nALguHQyw

确保身体，html的高度为100％。此外，我添加了flex-grow类，以使内容填充剩余高度。将来this may be added as a util class以便您不需要额外的CSS。