How to vertically and horizontaly align an image in the center?

Question

I have tried every answer on this site but it's not working!

Tried helpers, absolute position and some CSS.

<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>

body {

    background-color: rgb(18,19,19);
}

</style>
</head>
<body>

<img src="image.png" width="513" height="396" />

</body>
</html>

score 1 · Accepted Answer · answered Sep 22 '17 at 16:51

For img to center you need a parent to hold it (with 100% width)

In the middle of the screen see example below.

For center of the row you can remove height: 100vh;

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

<!DOCTYPE html>
<html>
<title>Title</title>

<head>
  <style>
    body {
      background-color: rgb(18, 19, 19);
    }
  </style>
</head>

<body>
  <div class="centered">
    <img src="image.png" width="513" height="396" />
  </div>

</body>

</html>

score 1 · Answer 2 · answered Sep 22 '17 at 16:58

1

Try this, it will center any kind of element against its parent:

.centerElement{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<img class="centerElement" src="image.png" width="513" height="396" />

answered Sep 22 '17 at 16:58

Kenzo_Gilead

2,187
9
35
60

bhansa · Answer 3 · 2017-09-22T17:18:19.923

0

Use position: absolute and give top and left to place the image in center.

Better approach: Use flex

.image{
  position:absolute;
  top:46vh;
  left:46vw;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>

body {

    background-color: rgb(18,19,19);
}

</style>
</head>
<body>

<img class="image" src="https://i.stack.imgur.com/CE5lz.png" width="50" height="50" />

</body>
</html>

edited Sep 22 '17 at 17:18

answered Sep 22 '17 at 16:51

bhansa

7,282
3
30
55

This is not working for some reason. Also the image doesn't stay in the center when resizing the window. – Vulkan Sep 22 '17 at 16:58
can you check now @Vulkan, updated. I have used vh and vw for viewport responsiveness. – bhansa Sep 22 '17 at 16:59
@bhansa if I may, giving `top` and `left` alone may *not* work in all cases... – kukkuz Sep 22 '17 at 17:04
@kukkuz what do you suggest then, please tell. – bhansa Sep 22 '17 at 17:08
1

See Elias MP's [answer](https://stackoverflow.com/questions/46369599/how-to-vertically-and-horizontaly-align-an-image-in-the-center/46369641#answer-46369729) – kukkuz Sep 22 '17 at 17:11

score 0 · Answer 4 · answered Sep 22 '17 at 16:54

body {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
 <div>
   <img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="">
 </div>
</body>
</html>

score -1 · Answer 5 · answered Sep 22 '17 at 17:02

-1

put your img in a then make your image position to relative and use padding-top and padding-left to center your image in position you want!

answered Sep 22 '17 at 17:02

S.Sow

139
1
4

How to vertically and horizontaly align an image in the center?

5 Answers5