How to vertically align text within <div> element css? [duplicate]

This question already has an answer here:

I am making a chrome extension for the first time and am trying to centre text. And the moment I am using text-align: centre; to horizontally align it but can't figure out how to vertically align so at the moment my text looks like this:

text-align: centre;

If anyone could help that would be great.

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2 Answers
2

ex) display: table

div
display: table;
width: 100px;
height: 50px;
background-color: #000;


div p
display: table-cell;
text-align: center;
vertical-align: middle;
color: #fff;


<div>
<p>chatter</p>
</div>

ex) flex

div
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 50px;
background-color: #000;


div p
color: #fff;


<div>
<p>chatter</p>
</div>

ex) position

div
position: relative;
width: 100px;
height: 50px;
background-color: #000;
text-align: center;

div p
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #fff;


<div>
<p>chatter</p>
</div>

A really simple class I use for this is

.is-vertical-center
display: flex;
align-items: center;



Hope this helps!