Centering text vertically and horizontally using CSS

[thestealthyfox]

So, I am trying to centre overlay text on my homepage slider using CSS.
I have managed to write the code below which centres my current text, however if I add another slide with shorter text, the text is no longer centred.
Also, in Firefox the text is slightly off centre.

Website is http://www.lemezandfridel.com

Can anyone see where I’m going wrong?

Thanks!

`
body.home .caption {
margin: -50px 0 0 -50px;
left: 13%;
top: 50%;
right: auto;
}

body.home .caption p {
height: 50px;
padding: 20px 40px;
background: #3cc;
background: rgba(51,204,204,.8);
font-size: 2.3em;
display: block;
font-style: normal;
}`

[Paulie_D]

Funny you should ask…Chris just did an article.

https://css-tricks.com/centering-css-complete-guide/

[Author]

Posts