6

I need to center an image in a middle of a div.

<div class="main">
    <img...>
</div>

In the example below the image is centered, but not in the middle.

https://jsfiddle.net/web_garaux/tng7db0k/

andreas
  • 16,357
  • 12
  • 72
  • 76
Daniel
  • 161
  • 1
  • 2
  • 5
  • 2
    There are so many different ways to do this if you just googled – Huangism Jun 12 '17 at 13:17
  • Please read this: [how to ask a good question](http://stackoverflow.com/help/how-to-ask) - the very top line: search and research... a simple search of this site would reveal hundreds of similar questions. Please put in a little effort before asking a question next time – Pete Jun 12 '17 at 13:31
  • Holy Hell, this is like the most asked and answered question on this site. – manneJan89 Jun 12 '17 at 13:42

6 Answers6

22

Simple and easy method to do this,

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  display:flex;
  align-items:center;
  justify-content:center;
}
<div class="test">
<img src="http://via.placeholder.com/350x150">
</div>
codesayan
  • 1,705
  • 11
  • 22
2

To vertically center your div, you can use positioning. Just apply

position: relative;
top: 50%;
transform: translateY(-50%);

to your image, and it will be vertically centered.

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  text-align: center;
}

.test>img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
<div class="test">
  <img src="http://via.placeholder.com/350x150">
</div>
andreas
  • 16,357
  • 12
  • 72
  • 76
0

You can use the simplest way -> display: table-cell; which allows you to use vertical-align attribute

.test {
  background-color: orange;
  width: 500px;
  height: 300px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
<div class="test">
<img src="http://via.placeholder.com/350x150">
</div>
moped
  • 2,197
  • 2
  • 24
  • 30
0

You can use display: flex;

DEMO

.test {
  display: flex;
  justify-content: center;
  background-color: orange;
  width: 700px;
  height: 700px;
}

.test img {
  align-self: center;
}
Dejan.S
  • 18,571
  • 22
  • 69
  • 112
0

Cleanest solution would be to make your div display:flex and align/justify content to center. 

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Your updated Fiddle: https://jsfiddle.net/y9j21ocr/1/

More reads on flexbox (recommended)

konrad_pe
  • 1,189
  • 11
  • 26
0

It is really easy if you can give image as background to div

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

<div class="test" style="background-image:url(http://via.placeholder.com/350x150);">
</div>

If you dont want to use inline style you can do

<div class="test">
  <img src="http://via.placeholder.com/350x150">
</div>

.test > img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.test{position: relative}
necilAlbayrak
  • 824
  • 6
  • 9
  • Please don't do this as your mixing up content with layout. – Sven van de Scheur Jun 12 '17 at 13:21
  • its an easy practice and it was used before flexbox or any other method was here. and believe me if you get image link somehow there is not a different loading it on style or in html. If you really hesitated to see a completely seperate layout I updated my answer you can check it. – necilAlbayrak Jun 12 '17 at 13:29
  • 1
    The absolute positioning + transform is a better approach than adding the image as background. Flexbox is also an option but not always the best one. Just avoid mixing content with layout. – Sven van de Scheur Jun 12 '17 at 13:37