Centering your web page using HTML and CSS

Summary

This article demonstrates how to center-align your web page using modern HTML and CSS techniques. We’ll provide an example that works seamlessly across all major browsers, including Firefox, Safari, and Google Chrome.

The CSS

For centering content, we use Flexbox, a modern layout module that provides powerful and efficient alignment. Copy & paste the code between your page’s <head> tags. If you’re using an external style sheet, delete the <style> tags as these are not required.

/* Centering Content */
body {
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center;     /* Centers content vertically */
  min-height: 100vh;       /* Ensures body takes full viewport height */
  margin: 0;               /* Removes default margin */
}

#wrapper {
  width: 80%;              /* Responsive width (80% of the viewport width) */
  max-width: 960px;        /* Maximum width for larger screens */
  text-align: left;        /* Aligns text inside the wrapper to the left */
}

The markup

You now need to wrap your code within a new <div> with an id “wrapper”. Your browser will apply the matching style to the <div> and center everything between the opening and closing <div>.

<div id="wrapper">
<!-- Replace this line with anything you require centering -->
</div>

Full working example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centering using CSS</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%2F*%20Centering%20Content%20*%2F%0Abody%20%7B%0A%09text-align%3Acenter%3B%0A%7D%0A%23wrapper%20%7B%0A%09margin%3A%200%20auto%3B%0A%09width%3A%20%09960px%3B%20%2F*%20Replace%20960px%20with%20your%20page%20width*%2F%0A%20%09text-align%3Aleft%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>
<body>
<div id="wrapper">
<!-- Replace below code -->
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Laboris nisi ut aliquip</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- Replace above code -->
</div>
</body>
</html>