Centering div that is wider than its parent without setting negative left margin

css position: absolute center horizontal and vertical
center div vertically
position: absolute center css
center div horizontally and vertically
center''> <div vertically and horizontally responsive
center div horizontally and vertically bootstrap
center absolute div without transform
position: 'absolute center react-native

I have a div inside a div.

The div inside is wider than its parent so the normal procedure

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

produces an inner div where the left edge of the child aligns with the left edge of the parent.

When people answers this question, they uses to go for the negative left margin approach. Is there a cleaner solution?

How about using position: absolute; with left:0;right:0; and margin: auto;

Also, you'll need to place position: relative; on a parent element which has greater width than the outer element. (In the fiddle below it's relative to the body by default)

FIDDLE

<div class="outer">
    <div class="inner"></div>
</div>
css
.outer
{
    width: 400px;
    height: 400px;
    background: beige;
    margin: 0 auto;

}
.inner
{
    width: 600px;
    height: 200px;
    background: pink;
    position: absolute;
    left:0;right:0;
    margin: auto;
}

How to center a child element in CSS, even if it is larger than the , Here is a solution without using CSS 2D/3D transformations. column (this is important) on parent element and display: table on child element. body <div class="centered d1"> <div class="centered d2"></div> </div> you can use the left/top position at 50% with negative margins of half the element size. Centering Percentage Width/Height Elements. If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element.

You can use flexbox:

.outer {
  display: flex; /* Magic begins */
  justify-content: center; /* Center contents */
  width: 400px;
  height: 400px;
  background: beige;
  margin: 0 auto;
}
.inner {
  flex-shrink: 0; /* Don't shrink it even if it's too wide */
  width: 600px;
  height: 200px;
  background: pink;
}
<div class="outer">
  <div class="inner"></div>
</div>

Absolute Horizontal And Vertical Centering In CSS, Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; Height must be declared (see Variable Height); Recommend setting At this point the block will fill all available space in its offset parent, The content block's width must be declared to be no wider than 100% of the container minus 0.25em  The text-align property only works on inline elements. The inline-block value displays the inner div as an inline element as well as a block, so the text-align property in the outer div centers the inner div. Centering a div within a div, horizontally and vertically. This uses the margin auto trick to center a div both horizontally and

I worked out an easy way for absolute elements using a transform.

left: 50%;
transform: translateX(-50%);

Will center it if wider than parent.

Centering HTML elements larger than their parents, It's not a common problem, but I've run into it a few times. How do you center an element when it is larger than it's parent? Item #1 rules out the simplest solution which merely applies a negative left margin to the child element. If we don't know the width of the child element, setting a specific left margin is  margin-left; All the margin properties can have the following values: auto - the browser calculates the margin; length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element; inherit - specifies that the margin should be inherited from the parent element; Tip: Negative values are allowed.

If the inner is an image I prefer this one background: url("../img/pic.jpg") no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;

Best way to center a <div> on a page vertically and horizontally , How do I make DIVS always fit in my parent div? Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: This div element is centered. Note: Center aligning has no effect if the width property is not set (or set to 100%).

See this website: http://www.greywyvern.com/?post=323

Works even if the page is narrower than the child div.

div#context {
  border:1px solid blue;
  width:400px;
  margin:0px auto;
}
div#context div {
  position:relative;
  right:50%;
  text-align:center;
}
div#context div p {
  border:1px solid green;
  width:450px;
  height:50px;
  display:inline-block;
  margin-right:-100%;
}
<div id="context">
  Page centering context
  <div>
<p>
  This is the child element<br />
  which should be centered
</p>
  </div>
</div>

How to make child divs always fit inside parent div?, Setting overflow property for main content area (full screen width) to hidden to center column div (i.e. 500%) and left margin to -50% of that width minus 100% (​i.e. -200%) This will make the div you are trying to extend 5 time wider than the center Step two is to set the left margin of that same container div to -200%. If all images were the same (but they won't be) then we could just say margin-left:-10px; and it would be centered in the 60px wide div. If we center the image with text-align:center on the parent

CSS Tricks: Expanding Beyond a Parent div, I wanted the logo image to be centered exactly in the middle of the screen, that is, is putting the upper left corner of image exactly in the center of the page, not the of half the images height, and a negative left margin of half the images width. the most important front-end technologies, from React to CSS, from Vue to D3,  Let's say the parent container was 60% wide and centered. That means there is 20% width on either side of it. But margin is calculated based on the parent element, so to pull it to the left 20% of the browser window, you'd need 1/3 of the width of the parent, so main { width: 60%; margin: 0 auto; /* creates 20% margins on either side

Quick CSS Trick: How To Center an Object Exactly In The Center , Let's say the parent container was 60% wide and centered. how far to pull out the full width container with negative margins. The amount we want to “pull” to the left and right is half the width of it's probably not super necessary, but you could pull the container back to the edge with transforms instead. * Centering an element - By setting an element with a "left: 50%" and a negative margin of half the elements width you can very easily center an element on the page. It's also a case where the negative margin makes sense. * Columizing a list element - using a negative margin-top is one way to easily convert an ordered list into columns.

Full Width Containers in Limited Width Parents, The margin CSS property sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. Negative values draw the element closer to its neighbors than it would be by In order to center an element inside its parent, use margin: 0 auto; . One thing about the behavior of the “<CENTER>” tag that does not fit well with CSS principals is that if the content of the centered children are wider than their parents, the left edge will not overflow to the left, even though the right edge does overflow to the right. In some implementations, such as FireFox and Opera, the left edge of

Comments
  • what do you mean by cleaner solution .. :D .. ?
  • That a negative margin is conceptually a non existing thing in the real world. However, most of the badness to this solutions comes from the required calculation that I need to do every time I change a measure.
  • But i don't think we can achieve this without using negative margin.. and to avoid different classes for different calculations we can use jquery.
  • Using negative values for margin is a valid approach. and there is no need of doing calculations every time when you change something if you use percentages. Check out this fiddle. (works if you know the widths of the containers)
  • When you mention knowing widths of containers, I have to add extra badness points to negative margins.
  • it is based on the solution mentioned here: coding.smashingmagazine.com/2013/08/09/…
  • This could be the best answer. but no answer is going to be cleaner than a negative margin.
  • If I set position: relative on .outer, the child will be left align with it, why?
  • @AndersLindén if you set position: relative on .outer, then it will do just that - ie positioning on .inner will start from the point where .outer starts (aligning .inner to the lhs of outer) So like I said in the answer - you'll need to place position: relative; on a parent element which has greater width - which relative to it you want to center .inner
  • does not work unless you force the outer element to be centered itself, and also, this is a major fake solution since your outer element isn't relatively positioned, which must be set 99% of the cases...so I don't see any way to use this, at all
  • This answer is really nice for a responsive layout with fluid measures.
  • In 2017+, this seems to be the best approach to me.
  • @Oriol I like this solution but unfortunately it doesn't work in IE. Is there a fix for IE?
  • Best answer. Thanks!