Vertical align text with multiple rows in a CSS circle - html

Question

I've created a circle that contains a text, and the text needs to always be centered. Simple enough, and I've found a lot of examples of this with words on one row using line-height for example.
My problem is that the text will sometimes contain one row, sometimes two and sometimes three and I can't get that to work.
Any ideas?
I've created a fiddle here with three examples.
HTML:
<div class="container">
<div class="splash">Lorem</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum dolor</div>
</div>
CSS:
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table-cell;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}

Answer 1

see this http://jsfiddle.net/tdtx3cfe/2/, I got it working with a little different approach, inserting the text into the span and making it display:table-cell, vertical-align:middle, change the splash to display:table, this will work even if you want to keep splash absolute
<div class="container">
<div class="splash"><span>Lorem<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum dolor<span></div>
</div>
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
span{
display:table-cell;
vertical-align: middle;
}

Answer 2

You could create an extra span tag inside .splash and center it via position absolute and transform translate trick
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
.splash span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
For a markup like this :
<div class="container">
<div class="splash"><span>Lorem</span></div>
</div>
An example: http://jsfiddle.net/tdtx3cfe/3/

Answer 3

As one of the options, you can align splash with flexible boxes:
.container {
width: 70px;
height: 70px;
display: inline-flex;
border-radius: 50%;
background: green;
justify-content: center;
align-items: center;
}
.splash {
color: white;
text-align: center;
transform: rotate(15deg);
}
body {
display: flex
}
I had to add body style to vertically align containers.
JSFiddle.