Align image in center and middle within div

Question

I have following div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

How to align the image so as to be located in the middle and center of div ?

Duplicate asked 2 minutes ago: [CSS: image middle](http://stackoverflow.com/questions/4888118/css-image-middle) — Pekka, Feb 03 '11 at 15:43
Similar topic here: http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474 — Hashem Qolami, Jan 20 '14 at 23:38
Possible duplicate of [How to position image in the center/middle both vertically and horizontally](https://stackoverflow.com/questions/4888118/how-to-position-image-in-the-center-middle-both-vertically-and-horizontally) — gbjbaanb, Oct 03 '17 at 15:06

score 470 · Answer 1 · edited Apr 23 '19 at 21:23

470

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

JSFiddle

edited Apr 23 '19 at 21:23

daaawx

3,273
2
17
16

answered Sep 05 '12 at 13:10

Gurpreet Singh

5,075
1
13
10

6

`display: block;` was my pitfall. TnX – Ujjwal Singh May 09 '13 at 08:23
2

Following doesn't work. What's the mistake i am doing.

– nizam.sp Oct 21 '13 at 11:00
1

If we don't use `display: block` the default is `display: inline` according to http://www.w3schools.com/cssref/pr_class_display.asp. Why do we need to use block? I worked for me, but not sure why block will center the img and inline will not. – user3731622 Jan 11 '16 at 20:07
because inline don't move in the line, it is, indeed in line. so margin auto is ineffective. – netalex Feb 16 '16 at 13:59
This does not work. Take a look at aerdmans solution below. That works fine. – AH. Feb 29 '16 at 10:34
33

This doesn't align vertically – alpadev May 11 '17 at 14:32

John K. · Answer 2 · 2011-02-03T15:53:49.133

190

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

edited Feb 03 '11 at 15:53

answered Feb 03 '11 at 15:48

John K.

5,426
1
21
20

2

Very short and easy solution, but it appears to only be working with a fixed, non-percentage width and height. It does work with floats though so +1 for that. — http://jsfiddle.net/2s2nY/2/ – magnetronnie May 26 '14 at 10:10
1

but this is only doing the vertical-align but not the horizontal right? – V-SHY Mar 25 '15 at 03:38
1

It won't work if image's width larger than div's width. – Davuz May 26 '15 at 07:02
3

This does not align vertically – Paceman Oct 30 '15 at 06:57
5

If we remove display:table-cell; it works perfactly. – Ahesanali Suthar May 18 '17 at 07:39

score 126 · Answer 3 · edited Feb 27 '17 at 04:39

This can also be done using the Flexbox layout:

STATIC SIZE

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}

<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

DYNAMIC SIZE

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}

<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

I found the example in this article, which does a great job explaining the how to use layout.

In the Static Size, there's no need for width and height for the child (at least in my version of Firefox). — Rodrigo, Jun 09 '17 at 13:23

score 90 · Answer 4 · edited Feb 19 '14 at 09:46

90

Seems to me that you also wanted that image to be vertically centered within the container. (I didn't see any answer that provided that)

Working Fiddle:

Pure CSS solution
Not breaking the document flow (no floats or absolute positioning)
Cross browser compatibility (even IE6)
Completely responsive.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

Note: this solution is good to align any element within any element. for IE7, when applying the .Centered class on block elements, you will have to use another trick to get the inline-block working. (that because IE6/IE7 dont play well with inline-block on block elements)

edited Feb 19 '14 at 09:46

Tushar Gupta - curioustushar

58,085
24
103
107

answered Sep 16 '13 at 14:24

avrahamcool

13,888
5
47
58

Instead of having additional `span`, you could use the pseudo-element `:before`: http://jsfiddle.net/xaliber/cj6zhtp0/ – deathlock Jun 22 '16 at 07:08
@deathlock it's well known. but i was targeting old IE browsers (who didn't support pseudo elements). – avrahamcool Jun 22 '16 at 08:11
@avrahamcool I see, I didn't realize that. Then what about wrapping the conditional ` – deathlock Jun 22 '16 at 13:13
@deathlock why not leave the span as it is? Its not a burden for the browser. – avrahamcool Jun 22 '16 at 16:44
1

It's not, but HTML should only be used for structure, not presentation. That job is left for CSS, hence the pseudo-element. – deathlock Jun 22 '16 at 17:15
@deathlock although I agree with what you are saying, in this case I don't. because we still need to add support for old IE's, and I prefer to write a common solution, than polluting my code with conditionals, and add the relevant CSS. – avrahamcool Jun 22 '16 at 18:09
1

What do you mean "Not breaking the document flow (no floats or absolute positioning)"?? What's the `#over { position:absolute; width:100%; height:100%;` ? – Rodrigo Jun 09 '17 at 13:19
@Rodrigo this part is taken from the OP code. I didn't want to change his code. the centering technique works without it. – avrahamcool Jun 09 '17 at 13:43
Ah ok. But it seems the flexbox layout is a better solution nowadays. It took me only two additional lines in the css, and no span tag. – Rodrigo Jun 09 '17 at 16:13
1

@Rodrigo indeed, if you don't need to target older browsers this flexbox is the recommended approach. – avrahamcool Jun 10 '17 at 18:42
@AlexBanman can you post a fiddle? I did this in a ton of places it's working perfectly. – avrahamcool Jul 26 '17 at 16:03
@avrahamcool Here is the link to my page... http://alynxagency.com/success-stories/luxury-brand.php I'm beginning to wonder if this is going to be a nightmare because I'm working with flexible layouts AND Slick Slider. :( – Alex Banman Jul 26 '17 at 16:10
and secondly: I did look through your code. it's infected with floats and static sizes (width, height in px) - so I think you are missing the goal of this answer. it's very upsetting to see comments like `this is not working` when you clearly misunderstood the concept. – avrahamcool Jul 27 '17 at 04:35

score 67 · Answer 5 · edited May 26 '18 at 20:30

67

img.centered {
   display: block;
   margin: auto auto;
}

edited May 26 '18 at 20:30

Ronan Boiteau

9,608
6
34
56

answered Jan 27 '14 at 07:38

Nitin

671
5
4

1

this is very similar to [this answer](http://stackoverflow.com/a/12282201/2351696) – suhailvs Jul 19 '14 at 00:29

score 48 · Answer 6 · edited Jun 12 '21 at 18:10

48

You can do this easily by using display:flex CSS property:

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

edited Jun 12 '21 at 18:10

SharpC

6,974
4
45
40

answered Nov 14 '17 at 15:41

tanveer ahmad dar

3,312
1
27
29

score 29 · Answer 7 · edited Feb 19 '14 at 09:46

29

#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

edited Feb 19 '14 at 09:46

Tushar Gupta - curioustushar

58,085
24
103
107

answered May 11 '13 at 17:27

dhir

296
3
6

score 17 · Answer 8 · answered Jan 14 '15 at 18:42

I still had some issues with other solution presented here. Finally this worked best for me:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

You can read more about that approach at this page.

I had to also add parent css but your code worked perfectly! position: relative; width: 100%; float: left; overflow: hidden; min-height: 189px; — user2593040, Dec 09 '16 at 09:12

score 15 · Answer 9 · answered Aug 19 '19 at 20:22

Daaawx's answer works, but I think it would be cleaner if we eliminate the inline css.

body {
 margin: 0;
}

#over img {
 margin-left: auto;
 margin-right: auto;
 display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="example" id="over">
 <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

score 11 · Answer 10 · edited Feb 07 '13 at 22:57

11

Basically, setting right and left margin to auto will cause the image to center align.

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

edited Feb 07 '13 at 22:57

Reine Johansson

318
2
4

answered Dec 08 '12 at 05:29

Garconis

773
11
31

score 10 · Answer 11 · edited Jun 10 '15 at 05:53

10

This would be a simpler approach

#over > img{
    display: block;
    margin:0 auto; 
}

edited Jun 10 '15 at 05:53

Subedi Kishor

5,906
5
35
53

answered Jun 10 '15 at 05:21

Sujay sreedhar

3,498
2
21
28

score 8 · Answer 12 · answered Nov 17 '16 at 14:00

8

Well, we are in 2016... why not use flexbox? It's also responsive. Enjoy.

#over{
display:flex;
align-items:center;
justify-content:center;
}

<div id="over">
 <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

answered Nov 17 '16 at 14:00

GabMic

1,422
1
20
37

score 8 · Answer 13 · edited Jun 26 '18 at 13:01

8

SIMPLE. 2018. FlexBox. To Check Browser Support - Can I Use

Minimal Solution:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

To get the widest browser support possible:

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}

edited Jun 26 '18 at 13:01

Calvin Nunes

6,376
4
20
48

answered May 30 '18 at 10:05

Nadav

1,730
16
20

sasha · Answer 14 · 2015-10-25T02:44:27.943

setting the img to display:inline-block while having set the superior div to text-align:center will do the job too

EDIT: to those folks who are playing with display:inline-block >>> don't forget that e.g. two divs like

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

really have no spaces between them (as seen here).

Just basic to avoid these (inline block inherent) gaps between them. These gaps can be seen between every two words I'm writing right now! :-) So .. hope this helps some of you.

score 6 · Answer 15 · answered Aug 16 '16 at 22:52

I've tried many approaches but only this one works for multiple inline elements inside a container div. Here is code to align everything in div at middle.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

Sample code is here: https://jsfiddle.net/yogendrasinh/2vq0c68m/

score 5 · Answer 16 · edited Oct 03 '17 at 12:57

5

CSS File

.over {
    display : block;
    margin : 0px auto;

edited Oct 03 '17 at 12:57

lapinkoira

8,320
9
51
94

answered Oct 03 '17 at 11:49

Sabarish R

71
1
7

William · Answer 17 · 2019-05-30T10:39:24.553

5

The marked answer for this will not vertically align the image. A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

edited May 30 '19 at 10:39

answered May 29 '19 at 14:45

William

8,007
5
39
43

This solution answers the question and works, unlike the marked answer. Perhaps the down-voter could detail their decision to downvote? – William May 30 '19 at 08:24
7

**From review queue**: May I request you to please add some context around your source-code. Code-only answers are difficult to understand. It will help the asker and future readers both if you can add more information in your post. – RBT May 30 '19 at 08:50
2

That doesn't justify the downvote. The answer is technically correct and would help future readers. I've updated the answer body to honour the house rules but perhaps a more direct solution should be implemented by the core team since identifying code only answers is a trivial task. – William May 30 '19 at 12:52

score 5 · Answer 18 · answered Jun 02 '19 at 04:03

5

Just set parent div css property "text-align:center;"

 <div style="text-align:center; width:100%">
        <img src="img.png"> 
 </div>

answered Jun 02 '19 at 04:03

Pratik Fanse

101
1
5

score 4 · Answer 19 · answered May 30 '19 at 06:18

4

This worked for me when you have to center align image and your parent div to image has covers whole screen. i.e. height:100% and width:100%

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

answered May 30 '19 at 06:18

Akshay Bande

2,491
2
12
29

score 3 · Answer 20 · edited Feb 19 '14 at 09:45

3

Try this minimal code:

<div class="outer">
    <img src="image.png"/>
</div>

And CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

edited Feb 19 '14 at 09:45

Tushar Gupta - curioustushar

58,085
24
103
107

answered Feb 07 '14 at 00:08

luchopintado

899
11
15

score 2 · Answer 21 · answered Apr 21 '13 at 12:34

many answer suggests to use margin:0 auto but this works only when the element you trying to make centered is not floating on left or right, that is float css attribute isn't set. In order to do this apply display attribute to table-cell and then apply margin of left and right to auto so your style will look like style="display:table-cell;margin:0 auto;"

score 2 · Answer 22 · answered Sep 05 '13 at 08:49

2

    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>

answered Sep 05 '13 at 08:49

betty.88

157
5

score 2 · Answer 23 · edited Oct 26 '15 at 10:44

2

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

edited Oct 26 '15 at 10:44

Parkash Kumar

4,710
3
23
39

answered Oct 25 '15 at 04:08

Lahori

1,071
11
20

It's best if you add some commentary and not just toss code out there. – Parkash Kumar Oct 26 '15 at 10:43

Sanjib Debnath · Answer 24 · 2016-07-14T06:28:28.067

2

For center horizontally Just put

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

Another method:

#over img {
    display: inline-block;
    text-align: center;
}

For center vertically Just put:

   #over img {

           vertical-align: middle;
        }

edited Jul 14 '16 at 06:28

answered Feb 16 '16 at 10:37

Sanjib Debnath

3,556
2
22
16

score 2 · Answer 25 · answered Jul 28 '16 at 01:53

2

This worked for me:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

answered Jul 28 '16 at 01:53

Sileria

15,223
4
49
28

score 2 · Answer 26 · answered Jun 22 '17 at 09:34

this did the trick for me.

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'Note: do not have a css class assocaited to 'BrandImage' in this case

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}

score 1 · Answer 27 · answered Mar 24 '16 at 08:38

Use positioning. The following worked for me...

With zoom to the center of the image (image fills the div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Without zoom to the center of the image (image does not fill the div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

score 1 · Answer 28 · answered Apr 22 '22 at 10:57

most of the solutions don't work because a div with 100% height doesn't mean the full browser height.

using height: 100vh; works.

<style type="text/css">
body {
  margin: 0;
}

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
    vertical-align: middle;
}
</style>

<div id="over">
  <img src="test.png" alt="test" width="600">
</div>

score 0 · Answer 29 · edited Jul 19 '16 at 19:05

You can take a look on this solution:

Centering horizontally and vertically an image in a box

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

KSJ10 · Answer 30 · 2016-12-04T08:57:39.850

0

A simple way would be creating separate styles for both the div and the image and then position them independently. Say if I want to set my image position to 50%, then I would have code which looks like the following....

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}

<div id="over">
 <img src="img.png" id="img">
</div>

edited Dec 04 '16 at 08:57

answered Nov 21 '16 at 16:54

KSJ10

66
9

Just tell me if it works with all kinds of browsers, even though this is a basic thing that every browser must support (otherwise don't call it a browser) – KSJ10 Nov 21 '16 at 17:00

score 0 · Answer 31 · answered Nov 23 '18 at 10:35

I add some more properties to the CSS. Like so:

div#over {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-align-items: center;
    display: -webkit-flex;
    display: -ms-flex; 
    display: flex;
}

score 0 · Answer 32 · answered Dec 28 '20 at 13:08

for a long time, i also tried the solution to put the img at the center of the div, but for my case i just need this type of component on ajax loading progress so i simply tried the following solution, hope this helps for you!

<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>

Morgan Feeney · Answer 33 · 2023-06-12T21:33:24.157

Here is a CSS Grid answer:

#over {
  display: grid;
  height: 100vh;
  place-content: center;
}

place-content: center is shorthand for:

.element {
  align-content: center;
  justify-content: center;
}

This ensures the image is aligned centrally on both vertical and horizontal axes.

<div id="over">
 <img src="img.png">
</div>

I'm assuming the inline styles you've applied to the div are for demonstration purposes, so have omitted them. The width of the div will inherently be 100% width of its parent container, I've added an arbitrary height: 100vh rule, but feel free to change it to whatever you need it to be.

For reference, this is from my guide on how to center images with CSS.

score -1 · Answer 34 · answered Jul 24 '17 at 02:33

-1

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

Modify height value for your need.

answered Jul 24 '17 at 02:33

Terry Lin

2,529
22
21

Intacto · Answer 35 · 2017-10-24T22:59:15.183

This should work.

IMPORTANT FOR TEST: To Run code snippet click left button RUN code snippet, then right link Full page

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}

<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>

score -1 · Answer 36 · answered Feb 20 '18 at 14:18

-1

Use bootstraps align-items and justify-content. See example below:

<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>

answered Feb 20 '18 at 14:18

Mwiza

7,780
3
46
42

score -1 · Answer 37 · answered Jun 08 '23 at 07:00

-1

I see over 30 answers and I haven't seen this one so I'm going to add it. just add a center tag.

<div id="over" style="position:absolute; width:100%; height:100%>
 <center>
    <img src="img.png">
 </center>
</div>

answered Jun 08 '23 at 07:00

celerno

1,367
11
30

Align image in center and middle within div

37 Answers37

CSS

HTML

Linked

Related