Simple center a object with css and no hacks

Question

I want to center an object using CSS and no hacks, is this possible and how?

I have tried this, but than my p tag is gone.

.centered {
  position: fixed;         


        

Answer 1

late into the game, but have you tried with display:flex on the parent ?

I have a useful class that is simple and works with all type of elements:

/* apply this on the parent */
.center {
    display:flex;
    align-items: center; /*vertical alignement*/
    justify-content: center; /* horizontal alignement*/
}

This is relatively new but supported at ~98% of major browsers.

However I suggest that you learn a bit about flexBox, it may seem complicated at first but it is very powerful for all type layouts !