how do i center an position an element in center of the web page ..i mean vertically and horizontally centered?

Question

say for example a picture

Answer 1

There are many ways...
The most simple and latest avaible is to use 'display:flex', but it could be also done through the use of 'display:table' (and 'table-cell').

However, depending on page context, if you want to do it in the normal content flow, it could become more or less tricky.
But if you mean centering an element over the whole content (as a pop-up image), give it a container on wich you apply:

#myWrapper {
position:fixed; /* don't scroll */
left:0; /* avoid body margins */
top:0; /* avoid body margins */
width:100vw; /* viewport width */
height:100vh; /* viewport height */
display:flex; /* require prefixed property to be more cross browser/version compatible */
align-items:center; /* require prefixed property */
justify-content:center; /* require prefixed property */
}

... and for using 'table' behaviour, you need to have two nested wrapper at minimal (one 'table' display, and inside one 'table-cell'), inside wrapper need to have 'text-align:center;' and 'vertical-align:middle'.

Anyway, you can achieve same goal by use 'position' property in others ways, for example by set it to to element to center at 'absolute', and have it's container already centered (by any way): as its size is zero (absolute content don't take place), you can either translate the element by 50% of its size to re-align it to center... those such kind of tricks are welcomed in certain layout cases, but it could be long and hard to explain each ways of doing ;P

Answer 2

@Ewatan
If you tick any answer (after ticking its colour changes to green) it means that answer is voted as the best answer by you (asker).
In your case visph deserve this. You should tick his answer as best because his answer nicely explains your question.

Answer 3

Why do you have marked and immediatly after unmarked my answer with 'best answer' tick?
Doesn't deserve it? @@

Answer 4

sorry i am new here