Menu
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:
392
Using CSS, you can center text in a div in multiple ways. The most common way is to use the text-align property to center text horizontally. Another way is to use the line-height and vertical-align properties. The last way exclusively applies to flex items and requires the justify-content and align-items properties.
Vertical centering is difficult because at the time the CSS for the child element (the element to be centered) is processed, the heights of the parent and child elements (the two values required to compute the top offset of the child element) are not known, as they both depend on elements which have not yet been ...
Like last time, you must know the width and height of the element you want to center. Set the position property of the parent element to relative . Then set the child's position property to absolute , top to 50% , and left to 50% . This just centers the top left corner of the child element vertically and horizontally.
Centering things. A common task for CSS is to center text or images. In fact, there are three kinds of centering: Centering lines of text; Centering a block of text or an image; Centering a block or an image vertically. In recent implementations of CSS you can also use features from level 3, which allows centering absolutely positioned elements:
For this method you must know the height of the element you want to center. First, set the display property of the parent element to relative. Then for the child element, set the display property to absolute and top to 50%: But that really just vertically centers the top edge of the child element.
This method is very similar to the negative margins method above. Set the position property of the parent element to relative. For the child element, set the position property to absolute and set top to 50%. Now instead of using a negative margin to truly center the child element, just use transform: translate (0, -50%):
Using flexbox to vertically and horizontally center content is usually the preferred method. All it takes is three lines of code in the container element to set display: flex and then center the child element vertically and horizontally using align-items: center and justify-content: center respectively.
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.
172
If you do NOT know the height of the header the only way I often use, requires extra html if done properly, tough you could do without.
You make the header vertical-align: middle by making it a table-cell
html{
height: 100%;
}
body {
display: table;
height: 100%;
margin: 0 auto;
padding: 0;
}
header {
display: table-cell;
vertical-align: middle;
}
note that I set 100% height on the html node, which really isnt proper css as far as I know, it should be on the body and header should be in a encapsulating div wich has display: table http://jsfiddle.net/bgYPR/2/
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
