Vertical center align text within a div
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod eempor incididunt ut.
div {
display: flex;
align-items: center;
}Vertically & horizontally center align text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod eempor incididunt ut.
div {
display: flex;
justify-content: center; /* makes it horizonally centered */
align-items: center; /* makes it vertically centered */
}
p {
text-align: center; /* makes the text/paragraph centered itself */
}Vertically & horizontally center text (without Flexbox)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod eempor incididunt ut.
div {
position: relative;
}
p {
text-align: center; /* makes the text/paragraph centered itself */
position: absolute;
top: 50%; creates /* creates 50% space from the top */
left: 50%; /* creates 50% space from the left */
transform: translate(-50%, -50%);
/* pushing the paragraph back by 50% of its own width and height */
/* to the left & top accordingly */
}This is how you can make center-aligned text vertically, horizontally & in both directions. Therefore if you still have any questions, let me know. I answer all the valid questions.
