Html 砌块的垂直和水平居中

我正试图将红色方块水平和垂直居中，如下图所示，但不幸的是，红色方块放错了位置。我使用bootstrap4。有人说怎么了吗

.parent{
位置：相对位置；
}
.孩子{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

*一些内容*
*一些内容*
*一些文本*
*一些内容*

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

这里有一个完整的指南

.parent{
高度：100px；
宽度：100px；
背景：黑色；
显示器：flex；
对齐项目：居中；
对齐内容：中心；}
.孩子{
高度：50px；
宽度：50px；
背景：红色；}

---

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

这里有一个完整的指南

.parent{
高度：100px；
宽度：100px；
背景：黑色；
显示器：flex；
对齐项目：居中；
对齐内容：中心；}
.孩子{
高度：50px；
宽度：50px；
背景：红色；}

---

我只是更改了一些引导类和css。希望有帮助：）

div{
边框：薄而实的黑色；
}
.孩子{
位置：相对位置；
保证金：自动；
宽度：60px；
}

*容器内容*
*左内容*
*右文本*
*子内容*

我只是更改了一些引导类和css。希望有帮助：）

div{
边框：薄而实的黑色；
}
.孩子{
位置：相对位置；
保证金：自动；
宽度：60px；
}

*容器内容*
*左内容*
*右文本*
*子内容*

您可以使用新的引导程序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>

*一些内容*
内容
内容
标题
小孩

---

只需确保主体、html的高度为100%。此外，我还添加了一个

flex-grow

类，使内容占据剩余的高度。在将来，这样您就不需要这个额外的CSS了。

您可以使用新的引导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>

*一些内容*
内容
内容
标题
小孩

---

只需确保主体、html的高度为100%。此外，我还添加了一个

flex-grow

类，使内容占据剩余的高度。将来，这样你就不需要这个额外的CSS了。

你没有做错什么。。。加宽：300px；背景：红色；高度：300px；到.parent，您将看到它的centeredWell它在父级具有高度时工作，但是如何使.parent的高度等于剩余空间，直到内容布局的高度结束。我试着给出高度：100%但父元素变得更大，内容布局你没有做错什么。。。加宽：300px；背景：红色；高度：300px；到.parent，您将看到它的centeredWell它在父级具有高度时工作，但是如何使.parent的高度等于剩余空间，直到内容布局的高度结束。我试图给出高度：100%，但父元素变得更大，内容布局您的代码仅水平居中。在我的情况下，父项的高度未知。@NurzhanNogerbek我没有为父项div设置任何高度属性，如您所见：-s。它的高度是基于内容的高度，您的代码只能水平居中。在我的情况下，父项的高度未知。@NurzhanNogerbek我没有为父项div设置任何高度属性，如您所见：-s。其高度基于内容的高度