Tutorials

Two Simple Ways to Vertically Align with CSS

Tags: Beginner

We all know achieving vertical alignment with CSS is a big headache. I don’t think I’ve run across any flawless way of doing this, but I would like to go over the one’s that I typically use.

Method 1 – Using Absolute Positioning

One flaw that I must point out right away with this technique is that you must specify the height of the centered element. So when trying to center align dynamic content, this can be quite an issue!

HTML

<div class="vert">
	<h1>Hi, I'm<span>Vertically Aligned</span></h1>
	<p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>
</div>

CSS
The way vertical alignment works when using absolute positioning is that it relies on its width and height of the element. This is how you would calculate your margin properties.

• Width of Element / 2 = Negative Left Margin
• Height of Element / 2 = Negative Top Margin

So in our example, this is how we would calculate this:

.vert {
	width: 580px;
	height: 190px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -95px 0 0 -290px;
}

Complete CSS

body {
	margin: 0;
	padding: 0;
	background: #1d1d1d;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
	font: 4em Georgia, "Times New Roman", Times, serif;
	color: #fff;
	border-bottom: 5px dotted #999;
	margin: 0;
	padding: 0 0 10px;
}
h1 span {
	font-weight: bold;
	display:block;
	font-size:1.5em;
	color: #fff000;
}
p {
	font-size: 1.3em;
	color: #999;
}
strong {
	color: #fff;
}
.vert {
	width: 580px;
	height: 190px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -95px 0 0 -290px;
}

Need to nest this in another element?

We would basically use the same technique as above, but on your parent element, you simply add a position: relative; and your good to go.

HTML

<div class="container">
	<div class="vert">
		<h1>Hi, I'm Nested &amp;<span>Vertically Aligned</span></h1>
		<p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>
	</div>
</div>

CSS

.container {
	position: relative;
	height: 500px;
	width: 800px;
	border: 10px solid #999;
	background: #000;
	margin: 20px;
}

Method 2 – Using Line-height

The line-height property is used to specify the amount of vertical space between lines of text. This typically works well for simple elements like formating a line of copy. The flaw of this technique is that when your copy breaks to the next line, you no longer have the vertical align effect.

HTML

<h1>Hi, I'm<span>Vertically Aligned</span> Within the H1</h1>

CSS

body {
	margin: 0;
	padding: 0;
	background: #1d1d1d;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
	font: 3em Georgia, "Times New Roman", Times, serif;
	color: #fff;
	height: 500px;
	line-height: 500px;
	text-align:center;
	border: 10px solid #999;
}
h1 span {
	font-weight: bold;
	font-size:1.5em;
	color: #fff000;
}
p {
	font-size: 1.3em;
	color: #999;
}
strong {
	color: #fff;
}