How to position image for it to always be in the middle of the page?

Forum|Forum|8 years ago
January 23, 2018
2 replies
1202 views

I know how to center an image with bootstrap .center-block but how do I center an image on a whole page?

This topic has been closed for replies.

Correct answer osgood_

If you just want an image centered vertically and horizontally on a page all by itself you can use Flexbox. Flexbox is supported in 97.5% of modern browsers - I cant think of a reason not to use it. Its been a main-stream workflow for a couple of years now in the professional developer world, so use it unless you need to support IE8 or IE9, which many have already dumped a long time ago.

<!DOCTYPE html>

<html>

<head>

<title>Flexbox - Center Vertically and Horizontally</title>

<style>

body {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

overflow:hidden;

}

</style>

</head>

<body>

</body>

</html>

N

nikon40564341Author

Participant

Still not centered... My index at: Index - Pastebin.com

This is what I get with your code:

B i r n o u

Legend

I just copy paste your code, into a blank document, place Dw in live view... and the image is centered.... but ... there is a but... if your screen resolution is wider than 800 ... necessarily this will block the width of the container and will cause a misaligned ...
same for the height ....
so in this case, and to fit the screen ... replace the container width and height CSS by

height: 100vw;

width: 100vw;