Vertically Centering Things – Ineffective CSS3

[alxfyv]

I’m new to HTML and CSS and this forum. I have what is probably an elementary problem but I can’t figure it out.

I’ve read W3C’s article Centering Things and want to use the CSS3 transform: translate(); method. It works to vertically and horizontally center a <p> in an inner<div>and to horizontally center the inner <div> within an outer <div> but not to vertically center the inner <div>.

I’ve created a jsfiddle of the test case.

I’d like to know what is happening, why the vertical centering isn’t working, and what the correct CSS3 is.

P.S. I’ve not yet figured out how to embed the live jsfiddle or codepen pen in the post. If anyone can help a forum novice with this – perhaps an article to read – I’d be grateful.

[JustinF]

Here’s probably a more complete guide to centering.

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

I apologize for not directly answering your question, but centering was always the trickiest of things to get right, and yet now it’s trivial with flexbox.

http://codepen.io/jmaker/pen/yNppGy?editors=110

And here’s a guide to that if you can get your head wrapped around it.

https://css-tricks.com/snippets/css/a-guide-to-flexbox

Embedding is as simple as signing up for a Codepen account, and simply include the link inside your post.

[Shikkediel]

The second transform is overwriting the first one, for them to both work they would have to be combined into a single rule :

.center {
position: absolute;
margin-top: 0;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

Only the webkit browser prefixes is needed by the way.

[Author]

Posts