块的垂直和水平居中答案

【问题标题】：Vertical and horizontal centering of the block块的垂直和水平居中
【发布时间】：2017-02-21 21:28:31
【问题描述】：

我正在尝试将红色块水平和垂直居中，如下图所示，但不幸的是红色块放置在错误的位置。我使用引导程序 4。有人说有什么问题吗？？

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

【问题讨论】：

你没做错...添加宽度：300px;背景：红色；高度：300 像素；到 .parent 你会看到它居中
当父级有高度时它可以工作，但是如何使 .parent 的高度等于剩余空间，直到内容布局的高度结束。我正在尝试给出高度：100% 但父元素变得比内容布局更大

标签： html twitter-bootstrap css bootstrap-4 twitter-bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

我只是更改了一些引导类和 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>

【讨论】：

您的代码仅水平居中。在我的情况下，父母的身高是未知的。
@NurzhanNogerbek 我没有为父 div 设置任何高度属性，如您所见：-s。它的高度基于内容的高度

【解决方案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

只要确保 body、html 的高度为 100%。另外，我添加了一个flex-grow 类来使内容填充剩余的高度。将来，this may be added as a util class 这样您就不需要这些额外的 CSS。

【讨论】：