Center an image horizontally using CSS

Question

I am trying to center a image horizontally using css.

I am displaying my image on the screen with the following HTML code:

<div id="loading" class="loading-invisible">  
    <img class="loading" src="logo.png">
</div>

I am croping my image as I only want to display some of the image and I am using the following css:

img.loading 
{
position:absolute;
clip:rect(0px,681px,75px,180px);
}

however I can't work out how to center the image once it has been croped.

Anyone able to help ?

score 148 · Answer 1 · edited Dec 13 '14 at 11:23

148

Try this for your CSS:

.center img {        
  display:block;
  margin-left:auto;
  margin-right:auto;
}

and then add to your image to center it:

class="center"

edited Dec 13 '14 at 11:23

Beta Projects

426
1
8
18

answered Aug 08 '12 at 05:20

Cynthia

5,273
13
42
71

1

This solution will not work when the img must be set with `position:absolute;` – Evhz Mar 30 '16 at 23:46
In my situation I had to use `display:contents` instead of `block` – Patrick Koorevaar Mar 11 '22 at 17:18

score 33 · Accepted Answer · answered Aug 08 '12 at 00:58

33

use position absolute and margin like this

img.loading{
  position: absolute;
  left: 50%;
  margin-left: -(half ot the image width)px
}

answered Aug 08 '12 at 00:58

Zendy

1,664
1
17
24

...or rather position: relative? – Stefan Reich Aug 16 '20 at 22:48

score 19 · Answer 3 · answered Jun 19 '18 at 06:44

You can use different method:

Method 1:

Its a simple method, use "text-align: center;" for your parent div.

#loading {
  text-align: center;
}

<div id="loading" class="loading-invisible">  
    <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
</div>

FIDDLE

Method 2:

Please check the code:

#loading img {
  margin: 0 auto;
  display: block;
  float: none; 
  /*width: 200px; if its a large image, it need a width for align center*/
}

<div id="loading" class="loading-invisible">  
    <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
</div>

FIDDLE

Method 3:

Using "display: flex;"

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

<div id="loading" class="loading-invisible">  
    <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
</div>

FIDDLE

Method 4:

You can use "position: absolute;",

#loading {
        position: relative;
        }
#loading img{
        position: absolute;
        top: 0;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%);
}

<div id="loading" class="loading-invisible">  
    <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
</div>

FIDDLE

Hope this will help you.

score 5 · Answer 4 · answered Aug 08 '12 at 00:49

5

Use margin

margin-left:auto;
margin-right:auto;

answered Aug 08 '12 at 00:49

Paul Dessert

6,363
8
47
74

4

I believe you'll also want a `display:block;` for an img tag. – Endophage Aug 08 '12 at 00:50
2

You'd also have to give it a width for that to work. You could also give the wrapper `text-align: center;` and that itself would center the image as long as you don't change the `display` to something else than `inline`. – qwerty Nov 06 '12 at 14:34
Suggest width: auto; – Mitchell Currie Sep 07 '16 at 02:50

helpfulUser · Answer 5 · 2022-11-12T02:44:33.400

-1

Ways:

Setting Left and Right Margin to “auto”
Using display "Flex"
Using the Text Align property

You can take a look on this blog for more descriptive answer

https://ecedev.com/post/How%20to%20center%20an%20image%20horizontally%20using%20HTML%20and%20CSS

edited Nov 12 '22 at 02:44

answered Nov 12 '22 at 02:34

helpfulUser

1
1

1

helpfulUser, a link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](/help/deleted-answers) – Yunnosch Nov 12 '22 at 02:35

Center an image horizontally using CSS

5 Answers5

Linked

Related