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

Report · Jan 23, 2018

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

Report · Jan 23, 2018

Which version of Bootstrap are you using -- 3.7 or the newest 4?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 23, 2018

3.3.7

Report · Jan 23, 2018

Please give show us the code - HTML and the relevant CSS

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jan 23, 2018

My index.html code at: Index - Pastebin.com just changed background color and added an image, so I have not touched css yet.

Report · Jan 23, 2018

Although you could use Flexbox, my preference goes out to a table cell because the latter is supported in ALL browsers. An example is

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div.container {
height: 20em;
width: 800px;
display: table-cell;
vertical-align: middle;
background: yellow;
}
img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="http://lorempixel.com/400/200" alt="">
</div>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jan 23, 2018

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

This is what I get with your code:

Report · Jan 23, 2018

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;

Report · Jan 24, 2018

That worked but there is one problem...

Report · Jan 24, 2018

you said that you was looking to center the image on the whole page ?... so it does it...no ? and AFAIK the page is sized by your browser window.. isn't it ?

Report · Jan 24, 2018

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>

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

1 Correct answer