Question

我正在尝试将此框垂直居中放置在页面中间，而我只能使用mx将其居中放置在页面中间。

<style>

.jumbotron {
    border-radius: 40px;
    background: #ffff;
    height: 600px;
    width: 600px;
    display: block;
}

</style>

<div class="container">

<div class="row">

<div class="mx-auto">

<div class="my-auto">

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

<div class="jumbotron">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>

</div>

Answer 1

“ my-auto”需要其父项具有明确的高度，例如（height：100vh;），以使其居中。考虑以下HTML：

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mx-auto my-auto">
      <div class="jumbotron">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p>
      </div>
    </div>
  </div>
</div>

此处“ row”是“ my-auto”类的父级。所以它应该有一个明确的高度。所以CSS就是：

.row {
    height: 100vh;
}

MX自动工作，但不是我的自动，我在做什么错？

1 个答案: