Centering Text with CSS for Beginners

This guide explains how to center text using CSS!
It covers both horizontal and vertical alignment techniques and provides clear examples and practical tips that even beginners can easily understand.

Horizontal Centering of Text Using CSS

Elements with Horizontal Space: Using text-align: center

HTML 
<h4>Element with Horizontal Space</h4>
CSS 
h4 {
    background-color: orange; /* Element that has horizontal space */
    text-align: center; /* Centers text within the horizontal space of this element */
}
Result

Elements Without Horizontal Space: Apply text-align: center to Ancestor Element with Horizontal Space

HTML 
<div class="wrapper">
    <span>Element Without Horizontal Space</span>
</div>
CSS 
.wrapper {
    background-color: orange; /* Ancestor element with horizontal space */
    text-align: center; /* Centers text inside descendant elements based on ancestor's horizontal space */
}
.wrapper span {
    background-color: yellow; /* Element without horizontal space */
}
Result

Elements Without Horizontal Space: Use display: flex and justify-content: center on Parent with Horizontal Space

HTML 
<div class="wrapper">
    <span>Element Without Horizontal Space</span>
</div>
CSS 
.wrapper {
    background-color: orange; /* Parent element with horizontal space */
    display: flex;
    justify-content: center; /* Horizontally centers child elements */
}
.wrapper span {
    background-color: yellow; /* Element without horizontal space */
}
Result

Vertical Centering of Text Using CSS

Centering Text Within Its Own Element: Using line-height

HTML 
<h4>Using line-height</h4>
CSS 
h4 {
    background-color: orange;
    line-height: 200px; /* Vertically centers the text by setting line height equal to element height */
}
Result

Centering Text Within Its Own Element: Using display: flex and align-items: center

HTML 
<h4>Using Flexbox</h4>
CSS 
h4 {
    background-color: orange;
    height: 200px;
    display: flex;
    align-items: center; /* Vertically centers child content within the element */
}
Result

Centering Text Within Its Own Element: Using display: table-cell and vertical-align: middle

HTML 
<h4>Using Table-Cell</h4>
CSS 
h4 {
    background-color: orange;
    height: 200px;
    display: table-cell;
    vertical-align: middle; /* Vertically centers the text */
}
Result

Centering Child Elements Vertically in a Parent: Using display: flex and align-items: center

HTML 
<div class="box">
    <span>Child Element</span>
</div>
CSS 
.box {
    background-color: orange;
    height: 200px;
    display: flex;
    align-items: center; /* Vertically centers child elements */
}
.box span {
    background-color: yellow;
}
Result

Centering Child Elements Vertically Using position and transform

HTML 
<div class="box">
    <span>Child Element</span>
</div>
CSS 
.box {
    background-color: orange;
    height: 200px;
    position: relative;
}
.box span {
    background-color: yellow;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
Result

Centering Text Horizontally and Vertically with CSS

Centering Text Within Its Own Element Using line-height and text-align: center

HTML 
<h4>Using line-height & text-algin: center</h4>
CSS 
h4 {
    background-color: orange;
    text-align: center; /* Centers text horizontally within the element */
    line-height: 200px; /* Vertically centers text by matching line-height to element height */
}
Result

Using display: flex, justify-content: center, and align-items: center on a Parent Element with Horizontal Space

HTML 
<div class="box">
    <span>Child Element</span>
</div>
CSS 
.box {
    background-color: orange;
    height: 200px;
    display: flex;
    justify-content: center; /* Centers child horizontally */
    align-items: center; /* Centers child vertically */
}
.box span {
    background-color: yellow;
}
Result

Using position and transform on Both Parent and Child Elements for Centering

HTML 
<div class="box">
    <span>Child Element</span>
</div>
CSS 
.box {
    background-color: orange;
    height: 200px;
    position: relative;
}
.box span {
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Result

See also