Do you want to find out how to make contents in vertical center align position? Today, I will show you how to code this using HTML5 and CSS3 web technologies. To follow this tutorial, you must have at least a basic understanding of HTML and CSS. If you are still a beginner and haven’t used these technologies mentioned, I highly recommend you to visit W3schools website to learn and understand the basics.
No more further ado, let’s start coding!
Setup the HTML structure
I have coded a simple HTML page with a heading and paragraph enclosed inside a bordered box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to vertically center align contents using HTML and CSS?</title>
</head>
<body>
<div class="vertical-center-container">
<div class="center-contents">
<div class="box">
<h1 class="title">Hello World!</h1>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</body>
</html>
Add styling on the HTML page.
I have created style.css CSS file and placed this inside the css folder.
<link rel="stylesheet" type="text/css" href="css/style.css">
Here’s the main source code the CSS file.
body {
margin: 0;
padding: 0;
}
.vertical-center-container {
width: 100%;
height: 100%;
display: table;
position: absolute;
}
.vertical-center-container .center-contents {
display: table-cell;
vertical-align: middle;
}
.vertical-center-container .center-contents .box {
width: 70%;
border: 1px solid #000;
padding: 20px;
margin: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vertical-center-container .center-contents .box h1.title {
font: bold 30px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
margin: 0 0 20px 0;
}
.vertical-center-container .center-contents .box p.text {
font: normal 14px Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
line-height: 30px;
margin: 0 0 20px 0;
}
.vertical-center-container .center-contents .box p.text:last-of-type {
margin-bottom: 0;
}
Here’s the complete HTML structure + the CSS file inserted on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to vertically center align contents using HTML and CSS?</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="vertical-center-container">
<div class="center-contents">
<div class="box">
<h1 class="title">Hello World!</h1>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</body>
</html>
We’re done!
Check Out The Preview
If you find it difficult to follow this tutorial, feel free to contact me and I will be happy to assist you. I hope you find this tutorial informative, interesting and useful to your website projects. Thank you.