mx-auto работает но не my-auto, что я делаю не так?

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;
}