Css img center position

How to make an image center (vertically & horizontally) inside a bigger div [duplicate]

I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div. How can it be done? I am able to get it centered horizontally by using text-align: center for the div. But vertical alignment is the issue..

Here are two simple methods to center an element within a div, vertically, horizontally or both (pure CSS): stackoverflow.com/a/31977476/3597276

35 Answers 35

Working in old browsers (IE >= 8)

Absolute position in combination with automatic margin permits to center an element horizontally and vertically. The element position could be based on a parent element position using relative positioning. View Result

This worked great for me, and helps when you do not have the exact size of either the container DIV or the image. Thanks!

You can also center exclusively horizontal by omitting the top and bottom, and center exclusively vertical by omitting the right and left.

@YoLudke, yes, you can. just include max-width:100%; height:auto; . you can also make it aligned to any of the sides by omitting that side. pretty cool.

Personally, I’d place it as the background image within the div, the CSS for that being:

(Assumes a div with id=»demo» as you are already specifying height and width adding a background shouldn’t be an issue)

Let the browser take the strain.

This is usually the best answer, unless the size of the image can vary from smaller to bigger than the container’s size. In the ‘smaller’ case, it will be fine, but in the ‘bigger’ case, your image will be clipped.

What about if we are using a sprite? I am trying to center the background image, but I’m using a CSS sprite. Any ideas?

@Nathan this is not an easy task. You can do it though if you know the exact dimensions of the div and leave enough transparent space around the image on the sprite so that the other images on the sprite are not displayed.

My images are always have a different size, How to applied this when image have different different size ?

another way is to create a table with valign , of course. This would work regardless of you knowing the div’s height or not.

but you should always stick to just css whenever possible.

I knew that this would get me down-voted. I thought about listing this just for the sake of completeness, but, oh well.

CSS when possible, but this is definitely a useful fallback. Don’t forget why we stopped using tables in the first place. Use whatever is the most flexible solution. Sometimes this is it.

Objection, animuson: All the other solutions here assume that you know the image size as they appear in the browser, which is not the case if you design a responsive layout where your image is «height:100%» and it’s container is «width:25%», leaving you with an x or y margin of unknown size.

I would set your larger div with position:relative; then for your image do this:

This only works because you know the dimensions of both the image and the containing div. This will also let you have other items within the containing div. where solutions like using line-height will not.

EDIT: Note. your margins are negative half of the size of the image.

I used this, but removed margin bits and adding -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); . Gives more generic solution that does need element size.

display: block; margin-left: auto; margin-right: auto 

else try this if the above only gives you horizontal centering:

.outerContainer < position: relative; >.innerContainer < width: 50px; //your image/element width here height: 50px; //your image/element height here overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; >

Nice! This actually worked and helps if you can’t place the image as background, as suggested in the previous answer.

here’s another method to center everything within anything.

HTML: (simple as ever)

 
 
/*this can be an img, span, or everything else*/ I'm the Content
 
 

.Container < text-align: center; >.Container:before < content: ''; height: 100%; display: inline-block; vertical-align: middle; >.Content

Benefits

The Container and Content height are unknown.

Centering without specific negative margin, without setting the line-height (so it works well with multiple line of text) and without a script, also Works great with CSS transitions.

+1. Great solution and very good SO answer. I’m wondering what’s causing the browser to do the (expected) behaviour only by adding the before pseudoclass with content: «» (Because many of us might have tried display: inline-block and vertical-align: middle without success).

it’s actually very simple. you create an empty element inside the container that spans 100% height, and then you align your element with the center of this empty one. causing your element to be in the exact center of the container.

This is coming a bit late, but here’s a solution I use to vertical align elements within a parent div.

This is useful for when you know the size of the container div, but not that of the contained image. (this is frequently the case when working with lightboxes or image carousels).

Here’s the styling you should try:

+1 for showing me a away to make a CSS div behave like a table cell, now I can avoid further countless hours of frustration getting CSS to do what is simple to do with a traditional HTML table cell

add in text-align:center; to container div and it’s centered both directions if you’re applying a max height/width to an unknown sized image.

Note: By default img elements are inline and will need to be set to ‘block’ to be in vertical middle. img < display: block; >

This answer seems better than the oter ones who that got more votes. It works regardless of third-party frameworks or combination of styles in multiple elements.

I’ve found that Valamas’ and Lepu’s answers above are the most straightforward answers that deal with images of unknown size, or of known size that you’d rather not hard-code into your CSS. I just have a few small tweaks: remove irrelevant styles, size it to 200px to match the question, and add max-height/max-width to handle images that may be too large.

div.image-thumbnail < width: 200px; height: 200px; line-height: 200px; text-align: center; >div.image-thumbnail img

style="text-align:center; line-height:200px" 

But this doesnt seem to work if the div just contains the image (FF3). code:

Am I missing anything?

This does not really do what the question asked and is only supposed to work for text (and only centers the aimage/text vertically) The accepted answer is the most apropriate solution afaik.

We can easily achieve this using flex . no need for background-image .

    #image-wrapper  
 
  

Vertical-align is one of the most misused css styles. It doesn’t work how you might expect on elements that are not td’s or css «display: table-cell».

The most common methods to acheive what you’re looking for are:

Thats only make it horizontal center. If you provide auto for top and bottom margin, browsers take it as zero by default.

Doesn’t work — jsfiddle.net/dandv/umBRF, though the reason is not the margin-top/bottom as knoxxs suggests. For the image to display as a table-cell, it needs a parent element to have display: table-cell; vertical-align: middle; — jsfiddle.net/dandv/umBRF/1

Close, but the display and vertical-align properties need to be applied to the container, not the thing being centered. (See Kshitij Chopra’s answer)

@sleepy You can easily do this using the following attributes:

I have a gallery of images for which I don’t know the exact heights or widths of images beforhand, I just know that they are smaller than the div in which they are going to be contained.

By doing a combination of line-height settings on the container and using vertical-align:middle on the image element, I finally got it to work on FF 3.5, Safari 4.0 and IE7.0 using the following HTML markup and the following CSS.

div.painting < float:left; height:138px; /* fixed dimensions */ width: 138px; border: solid 1px white; background-color:#F5F5F5; line-height:138px; text-align:center; >div.painting a img

Typically, I’ll set the line-height to be 200px. Usually does the trick.

    html, body < height: 100%; >#table-foo < width: 100%; height: 100%; text-align: center; vertical-align: middle; >#table-foo img 

Another way (not mentioned here yet) is with Flexbox.

Just set the following rules on the container div :

display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ 

A good place to start with Flexbox to see some of it’s features and get syntax for maximum browser support is flexyboxes

Also, browser support nowadays is quite good: caniuse

For cross-browser compatibility for display: flex and align-items , you can use the following:

display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; 

Источник

How to Center an Image Vertically and Horizontally with CSS

Cem Eygi

Many developers struggle while working with images. Handling responsiveness and alignment is particularly tough, especially centering an image in the middle of the page.

So in this post, I will be showing some of the most common ways to center an image both vertically and horizontally using different CSS properties.

Here’s an interactive scrim about how to center an image vertically and horizontally:

I’ve gone over the CSS Position and Display properties in my previous post. If you’re not familiar with those properties, I recommend checking out those posts before reading this article.

Here’s a video version if you want to check it out:

Centering an Image Horizontally

Let’s begin with centering an image horizontally by using 3 different CSS properties.

Text-Align

The first way to center an image horizontally is using the text-align property. However, this method only works if the image is inside a block-level container such as a :

Margin: Auto

Another way to center an image is by using the margin: auto property (for left-margin and right-margin).

However, using margin: auto alone will not work for images. If you need to use margin: auto , there are 2 additional properties you must use as well.

The margin-auto property does not have any effects on inline-level elements. Since the tag is an inline element, we need to convert it to a block-level element first:

Secondly, we also need to define a width. So the left and right margins can take the rest of the empty space and auto-align themselves, which does the trick (unless we give it a width of 100%):

Display: Flex

The third way to center an image horizontally is by using display: flex . Just like we used the text-align property for a container, we use display: flex for a container as well.

However, using display: flex alone will not be enough. The container must also have an additional property called justify-content :

The justify-content property works together with display: flex , which we can use to center the image horizontally.

Finally, the width of the image must be smaller than the width of the container, otherwise, it takes 100% of the space and then we can’t center it.

Important: The display: flex property is not supported in older versions of browsers. See here for more details.

Centering an Image Vertically

Display: Flex

For vertical alignment, using display: flex is again really helpful.

Consider a case where our container has a height of 800px, but the height of the image is only 500px:

Now, in this case, adding a single line of code to the container, align-items: center , does the trick:

The align-items property can position elements vertically if used together with display: flex .

Position: Absolute & Transform Properties

Another method for vertical alignment is by using the position and transform properties together. This one is a bit complicated, so let’s do it step by step.

Step 1: Define Position Absolute

Firstly, we change the positioning behavior of the image from static to absolute :

Also, it should be inside a relatively positioned container, so we add position: relative to its container div.

Step 2: Define Top & Left Properties

Secondly, we define the top and left properties for the image, and set them to 50%. This will move the starting point(top-left) of the image to the center of the container:

Step 3: Define the Transform Property

But the second step has moved the image partially outside of its container. So we need to bring it back inside.

Defining a transform property and adding -50% to its X and Y axis does the trick:

There are other ways to center things horizontally and vertically, but I’ve explained the most common ones. I hope this post helped you understand how to align your images in the center of the page.

If you want to learn more about Web Development, feel free to visit my Youtube Channel for more.

Источник