It is always challenging to make vertical align middle text or image using CSS or even with bootstrap. But as we know bootstrap 4 launch new version of bootstrap. We can do it simply and easily vertical center div vertically and horizontally, you have to just use some Vertical alignment class of bootstrap 4 like .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top.
In this snippet, I created a simple three-box design. the first box I set vertical align center text using bootstrap 4. second box I set vertical align middle div. in the last box, I set vertical align the middle image. you can download code and also check the demo.
<!DOCTYPE html>
<html>
<head>
<title>Vertical align Center Design Using Bootstrap 4.0</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-7 main-section text-center">
<div class="col-lg-12 heding">
<p class="mb-3 mt-2 p-0 ml-0">Vertical align Center Design Using Bootstrap 4.0</p>
</div>
<div class="row section">
<div class="col-sm-12 align-self-center">
<h6>Vertical align Center Text
</h6>
</div>
</div>
<div class="row section2">
<div class="col-lg-12 align-self-center">
<img src="//nicesnippets.com/image/imgpsh_fullsize.png">
</div>
</div>
<div class="row section3">
<div class="col-lg-12 align-self-center">
<span>
NiceSnippets.com
</span><br>
<img src="//nicesnippets.com/image/imgpsh_fullsize.png" class="mt-3">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
font-family: 'Roboto Condensed', sans-serif;
background-color: #f5f5f5;
}
.heding{
background-color: #f5f5f5;
}
.heding p{
font-size:25px;
text-shadow: 0 1px 0 rgb(255,205,202) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
}
.main-section{
position:relative;
left: 50%;
transform: translate(-50%,0%);
}
img{
width:80px;
height:80px;
}
.section,.section2,.section3{
background-color: #F4837D;
height:250px;
color:#fff;
}
.section2{
background-color:#F9B38F;
}
.section3{
background-color:
}