How to centre text as CSS content attribute vertically and horizontally? - css

Question

I would like to center text as CSS3 content attr vertically and horizontally. Centering should have no issues on screen resize.
Please inspect the code at: http://jsfiddle.net/epomschar/3pb3swwe/
<div class="container"></div>
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
bottom: 0;
left: 0;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
Solution: http://jsfiddle.net/epomschar/3pb3swwe/7/

Answer 1

Just remove bottom: 0; and you already got the solution.
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
/* bottom: 0; REMOVE THIS LINE */
left: 0;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
<div class="container"></div>

Answer 2

Just add a padding to &:after.If you want to change more, you simply add padding-left,padding-right and change the position as you want.This one padding attribute make changes to all over your circle,you can specify changes like what i said you before by using padding-left etc.
.container {
position: relative;
height: 200px;
width: 200px;
&:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
bottom: 0;
left: 0;
text-align: center;
transform: translateY(-50%);
padding:30px; //MODIFICATION
}
&:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
}
Else you can add transform: translateY(-30%); and margin:5%; instead of padding:30%;

Answer 3

Do you mean like this? The plus is right in the centre.
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: '+';
color: white;
width: 100%;
font-size: 34px;
top: 50%;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
background-color: black;
border-radius: 50%;
width: 100%;
height: 100%;
}
<div class="container"></div>