Text not fully centered in Div? [duplicate] - html

Question

This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 3 years ago.
I am pretty new to CSS and looked at some guide about how to center a text inside a div, but now it's not fully, but just almost centered...
Image: https://cdn.discordapp.com/attachments/554447633197039627/595281754135199754/unknown.png
CSS:
.info { /* Background (div)*/
background-color: red;
height: 10em;
width: 50em;
position: absolute;
left: 50%;
top: 50%;
margin:-5em 0 0 -25em;
text-align: center;
}
.info-text { /* Text (span) */
font-size: 6em;
display: inline-block;
vertical-align: middle;
}

Answer 1

u can use flex display to the parent with align-items:center and justify-content:space-between
there is other methods but i prefer this one!
*{
margin:0;
padding:0;
}
.center-text{
width:300px;
height:150px;
background:red;
display:flex;
align-items:center;
justify-content:space-around;
}
p{
font-size:30px;
}
<div class="center-text">
<p>Hello World</p>
</div>

Answer 2

you can center vertical and horizontal using the below css
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
below is the working snippet
.parent {
background: red;
height: 100vh
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 23px;
color: #fff
}
<div class="parent">
<div class="center">Vertical and horizontal center</div>
</div>

Answer 3

.info { /* Background (div)*/
background-color: red;
height: 10em;
width: 50em;
position: relative;
}
.info-text { /* Text (span) */
font-size: 6em;
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="info">
<div class="info-text">Text</div>
</div>

Answer 4

You can accomplish that by setting the line-height in .info-text with same height as is your .info
In your case, I've changed the unit to px and as you can see, .info has height: 100px; - from that I've added line-height: 100px; in .info-text
It will be in perfect center as long as you keep the line-height same as height.
.info { /* Background (div)*/
background-color: red;
height: 100px;
width: 500px;
position: absolute;
left: 50%;
top: 50%;
margin: -25px 0 0 -250px;
text-align: center;
}
.info-text { /* Text (span) */
position: relative;
font-size: 60px;
line-height: 100px;
display: inline-block;
}
<div class="info">
<span class="info-text">CRUGG</span>
</div>

Answer 5

You don't need absolute positioning at all, just use flexbox to center horizontally and to align the text at the bottom of your container, use text-align:center and relative position for the text. With relative position you will be able to easily move it outside of the container with the bottom property
Example:
.info { /* Background (div)*/
position:absolute;
top:0;
bottom:0;
margin:auto;
background-color: red;
height: 10em;
width: 100%;
display:flex;
justify-content:center;
align-items:flex-end;
z-index:99;
}
.info-text { /* Text (span) */
font-size: 6em;
position:relative;
bottom:-0.5em;
}
<div class="info">
<div class="info-text">Text</div>
</div>
You can set align-items:center if you want your text to be centered vertically too.
Example
.info { /* Background (div)*/
position:absolute;
top:0;
bottom:0;
margin:auto;
background-color: red;
height: 10em;
width: 100%;
display:flex;
justify-content:center;
align-items:center;
z-index:99;
}
.info-text { /* Text (span) */
font-size: 6em;
position:relative;
}
<div class="info">
<div class="info-text">Text</div>
</div>