Vertical and horizontal centering of the block - html

Question

I am trying to center red block Horizontally and Vertically as in the picture below, but unfortunately red block is placed in the wrong place. I use bootstrap 4. Сan anyone say what's wrong??
.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

You can use flexbox for effortless centering of element.
Here's a full guide for 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

i just change some bootstrap class and css. hope it help :)
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

You can do this using the new Bootstrap 4 flexbox utilities..
<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
Just make sure the body,html are 100% height. Also, I added a flex-grow class to make content fill the remaining height. In the future, this may be added as a util class so that you won't need this extra CSS.