Centering With CSS3 Using Text-Align, Margin and Position

Опубликовано: 09 Январь 2025
на канале: Code Whisperer

2,823

In this short video we will learn how to center elements horizontally and vertically using CSS3.

We will use CSS3 to center text with text-align: center, and block elements with margin: auto and position: absolute.

For your convenience here is the code used in this demonstration:

.text-inner {
text-align: center;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 30px;
}

.square {
height: 250px;
width: 250px;
background-color: #AAADFF;
text-align: center;
margin: auto;
position: absolute;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;