Вертикальное и горизонтальное центрирование блока

Question

Я пытаюсь центрировать красный блок Горизонтально и вертикально, как на картинке ниже, но, к сожалению, красный блок расположен не в том месте. Я использую bootstrap 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>

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

я просто изменить некоторые класс начальной загрузки и 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.