Here’s what that looks like:
See the Pen Centering an HTML Element Type with CSS by HubSpot (@hubspot) on CodePen.
Here’s a closer look at the result:
Centering Individual Elements with a CSS ID
If you’d like to center only a single element on the page, then you can add an ID attribute to the element and target it with an ID selector. Or, you could use inline CSS.
First, let’s use an ID attribute and selector.
Here’s the CSS:
See the Pen Centering Individual Elements with CSS by HubSpot (@hubspot) on CodePen.
Here’s a closer look at the result:
Centering Text Inside a Button Using Inline CSS
Now let’s use inline CSS. But instead of centering headings and paragraphs, let’s center text inside another element.
Say I’m building a web page using Bootstrap CSS and I add a Bootstrap button that I want to center on the page. Aligning the button, and the text inside the button, would differ slightly from the examples above. That’s because the text-align property only works on the content inside block-level elements, such as headings and paragraphs, and not inline elements, such as buttons.
So, first, I’d have to wrap the button in a div. Then I could apply the inline CSS to the div to center-align the content inside the div.
Here’s what that looks like:
See the Pen Centering Text Inside a Button Using CSS by HubSpot (@hubspot) on CodePen.
Here’s a closer look at the result:
Centering a Block Element Using the Margin Property
If you’re centering an entire block element, such as a div, the text-align property won’t work. (Note that it does work when centering the content inside a div.) Instead, you can use the margin property to center the entire element. Here’s what that looks like:
See the Pen Centering a Block Element Using the Margin Property by HubSpot (@hubspot) on CodePen.
Here’s a closer look at the result:
Learn how to center a div in CSS here.
Centering Text Inside a Div
Let’s say you wanted to center a div and also center the text inside it. Like in the previous example, add a “center” ID selector to your chosen div, then set the margin to “auto.” Then, add the “text-align: center” declaration.
Here’s what that looks like:
See the Pen Centering Text Inside a Centered Div by HubSpot (@hubspot) on CodePen.
Here’s a closer look at the result:
As you can tell from the examples above, the text-align property only specifies the horizontal alignment of text. Specifying the vertical alignment of text is more complicated. Let’s take a look below.
Vertically Align Text
You can center text vertically in a number of ways. For the methods below, the text will have to be contained by a parent element, like a div. Let’s start with the easiest.
Note that if you want your text to also be horizontally centered, simply add the text-align property and set it to center in any of the examples below.
Vertically Center Text Using CSS Padding
One of the simplest solutions to vertically centering text is to use top and bottom padding.
To apply CSS padding to an element, I can use the long form method and define both the padding-top and padding-bottom properties in my CSS. Or I can use CSS shorthand on the padding property and include three values: the first value will represent the top padding, the second will represent the left and right padding, and the third will represent the bottom padding.
Below is the CSS code using the shorthand method:
See the Pen Vertically Center Text Using CSS Padding by HubSpot (@hubspot) on CodePen.
Here’s the result:
Vertically Center Text Using the CSS Line-Height Property
To vertically center text within an element, you can also use the CSS line-height property. You’ll have to set the property with a value that is equal to the container element’s height.
Here’s the CSS:
See the Pen Vertically Center Text Using the CSS Line-Height Property by HubSpot (@hubspot) on CodePen.
Here’s the result:
Vertically Center Text Using the CSS Position and Transform Properties
Another method for centering text vertically on a page requires the CSS position property and the transform property.
To start, set the position of the div containing the text to relative. Then you want to style the paragraph within the div. First, set its position to absolute so that it’s taken out of the normal document flow. Then set the left and top properties to 50%. This tells the browser to line up the left and top edge of the paragraph with the center of the page horizontally and vertically (ie. 50% to the right and down the page). The problem is we don’t want the edges of the paragraph to be lined up in the middle of the page — we want the center of the paragraph to be lined up in the middle of the page.
That’s where the CSS transform property comes in. Using the transformation method known as the translate() method, we can move the paragraph along the X- and the Y-axis. To truly center the paragraph, we want to move it 50% to the left and up from its current position. That will tell the browser to put the center of the paragraph in the center of the page.
Here’s the CSS:
See the Pen Vertically Center Text Using the CSS Position and Transform Properties by HubSpot (@hubspot) on CodePen.
Here’s the result:
Vertically Center Text Using Flexbox
Flexbox is one of the best methods for vertically (and horizontally) centering text, since it’s responsive and doesn’t require margin calculations.
First, you need to define the parent container — in this case, the div — as a flex container. You do this by setting the display property to “flex.” Then, define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Here’s the CSS:
See the Pen Vertically Center Text Using Flexbox by HubSpot (@hubspot) on CodePen.
Here’s the result:
Should you use inline, internal, or external CSS to center text?
As you consider your different options for centering text using CSS, you might wonder whether it’s better to use inline, internal, or external CSS.
Inline CSS is included in the opening tag of an element, as follows:
<p style=”align-text: center”>
Internal CSS is included between the <style> tags in the header of your HTML document, as follows:
<html>
<head>
<style>
body {
align-text:center
}
</style>
</head>
External CSS refers to CSS in the external stylesheet that you link to in the head tag of your HTML document.
So, which one of these options works for you?
If you’re centering a one-off element on a blog post or page, stick to inline CSS. That way, you don’t have to create a CSS class or ID just for that element, which you’d then have to add to your stylesheet.
If you’re centering an element type on one specific page, you can use internal CSS to center that element without going one-by-one. Just be sure to choose the right CSS selector so that your changes apply.
If you’d like to center a type of element across your entire website, use the external stylesheet.
Centering Text on your Website
If you have some basic knowledge of HTML and CSS, you can easily center text on your web pages. This can help you build custom page layouts, make your content stand out, and engage users as they scroll through your website.
Editor's note: This post was originally published in November 2020 and has been updated for comprehensiveness.