In this article you will find the solution for center aligning the text or image in horizontally and vertically of the web page using CSS only. It's a very small and simple method to do it. This article uses two parts, one is HTML part and another is CSS part. In the HTML part it uses 2 nested div's and one span code inside it. The benefit of span code is that it uses the fix width for the div content which can be set according to the need.
Another is CSS part containing styles for the HTML section.
Please copy the below HTML code in the
HTML code : (copy and paste the custom code in the body section)
Another is CSS part containing styles for the HTML section.
Please copy the below HTML code in the
<body> part and the CSS code in the <styles> in the header section.HTML code : (copy and paste the custom code in the body section)
<div class="container">
<div class="center-me">
<span class="set-width">
I AM VERTICALLY AND HORIZONTALLY CENTERED.
<br/>
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.
</span>
</div>
</div>
<div class="center-me">
<span class="set-width">
I AM VERTICALLY AND HORIZONTALLY CENTERED.
<br/>
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.
</span>
</div>
</div>
CSS code : (copy and paste the code in the <styles> part in head section)
body, html {height: 100%; margin: 0; padding: 0}
body {background: #1d638f; color: #ffffff; font-size: large;}
div.container {top: 0; left: 0; width: 100%; height: 100%;position: absolute; display: table}
.center-me {display: table-cell; vertical-align: middle;text-align: center}
.set-width {width:500px;max-width:500px;display:inline-flex}
body {background: #1d638f; color: #ffffff; font-size: large;}
div.container {top: 0; left: 0; width: 100%; height: 100%;position: absolute; display: table}
.center-me {display: table-cell; vertical-align: middle;text-align: center}
.set-width {width:500px;max-width:500px;display:inline-flex}
See the final result, this content is centered aligned of the page
So finally we can adjust the width of the content area from the css code