Centering Text Vertically and Horizontally in an Anchor Tag using CSS

Published June 2nd, 2023 9 min read

Hey fellow web developers! Today, let's talk about a common challenge we often encounter - how to center text both vertically and horizontally within an anchor (<a>) tag using CSS. Achieving perfect alignment can be crucial for creating visually appealing and user-friendly interfaces.

Here's a simple and effective example to help you accomplish this:

Assume we have the following HTML markup:

<!DOCTYPE html>
<html>
<head>
    <title>Centering Text in Anchor Tag</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <a href="#" class="centered-link">Click Me!</a>
    </div>
</body>
</html>

Now, let's dive into the CSS:

/* styles.css */
body {
    height: 100vh; /* Ensure the body covers the full viewport height */
    margin: 0; /* Remove default margins for accurate centering */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Horizontally center the container */
    align-items: center; /* Vertically center the container */
}

.container {
    /* Add optional container styles if needed */
}

.centered-link {
    display: inline-block; /* Ensure inline elements like anchor tags can have width and height properties */
    padding: 10px 20px; /* Add padding to create some space around the text */
    background-color: #3498db; /* Just for illustration purposes */
    color: #fff; /* White text for contrast */
    text-decoration: none; /* Remove underline for anchor tag */
    border-radius: 5px; /* Round the corners for a nicer look */
    /* Additional styles if needed */
}

In this example, we use flexbox to center the anchor tag both vertically and horizontally within the viewport. The display: flex;, justify-content: center;, and align-items: center; properties work together to achieve this alignment.

The anchor tag (<a>) is styled as an inline-block element, allowing us to set the width and height properties, along with padding to create some spacing around the text. The rest of the CSS is optional and can be customized based on your specific design requirements.

By following these steps, you'll now have a perfectly centered anchor tag with text that is both vertically and horizontally aligned.

Remember to adjust the class names and styles according to your project's needs. Now you have a neat trick up your sleeve for creating beautifully centered elements in your web applications! 🎉