Home/ Questions/Q 6697031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:24:43+00:00

I have html that looks like this: <!DOCTYPE html> <head> <meta charset=utf-8> <!–[if lte

  • 0

I have html that looks like this:

<!DOCTYPE html> 
<head>
    <meta charset="utf-8">

    <!--[if lte IE 8]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head> 

<body>

<header>
  <h1>Some title thing, who knows</h1>
  <nav>
    <ul>
      <li><a href="one/">One</a></li>
      <li><a href="two/">Two</a></li>
      <li><a href="three/">Three</a></li>
    </ul>
  </nav>
</header>

</body>
</html>

If I give header an auto margin and a width, it’s horizontally centered. What’s the least horrible way to ensure that it’s vertically centered, as well?

I am aware of the following articles which provide some discussion of the topic:

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since this question was tagged CSS3, here’s a “least horrible” solution using CSS3’s “flexbox”. Unfortunately only recent versions of Safari, Chrome and Firefox support it.

    html, body {
  margin:0;
  padding:0;
  height:100%;
  background:#eee;
}
header {
  width:30em;
  background:#fff;
}
body {  
  display:box;
  box-pack:center;
  box-align:center;
  box-orient:horizontal;
}

    A more complete demo can be found here.

    • 0