Center Overflowing Div Inside Smaller Div

center overflowing div inside smaller div

You can position them absolutely and then use CSS3 transforms to drag them back into place.

JSfiddle Demo

CSS

#container {
    height: 300px;
    width: 300px;
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color: #663399;
}
#content {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color: rgba(255,0,0,0.5);
}

Center a div inside a div. The div inside must be smaller than the parent div. Bootstrap 4

You can use flex and margin:auto to center a component inside another, and it makes it responsive.

#parent {

  border: 1px solid black;

  display: flex;

  position: relative;

  height: 100vh;

  width: 100vw;

}

#child {

  border: 1px solid black;

  width: 80%;

  height: 80%;

  margin: auto;

}

<div id="parent">

  <div id="child">

    Lorem ipsum

  </div>

</div>

Larger div centered inside smaller div

Updated Fiddle

#containment{
    width:500px; height:500px; opacity:0.5;  background:red;
    position : absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

By using transform, you're not dependent of the width and height from the parent container.
See caniuse for browser support.

The properties left and top are setting the top-left-edge of the element to the center of the parent. By using translate, it shifts the X- and Y-Position back by 50 percent of its own dimensions.

You can find more information about transform on developer.mozilla.org - transform

Center img inside smaller div not working as intended

Thanks to Abhitalks I found the problem I had with the flexbox. I've adapted the codepen so that it works with flexbox now.

For everyone who's seeking a solution to this, this is what your markup should be like:

HTML

<div class="container">
    <img src=""/>
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    width: 50%; /* may have any percentage */
    height: 100%; /* this is needed so that there will be no border at the bottom of the picture if window is resized */
    overflow: hidden;
    float: left; /* this can be left out if there is no textbox on the right side */
}

img {
    min-width: 100%;
    min-height: 100%;
}

Happy coding!

Center a large image of unknown size inside a smaller div with overflow hidden

What about this:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

This assumes that the parent div is positioned relatively. I think this works if you want the .img relatively positioned rather than absolutely. Just remove the position: absolute and change top/left to margin-top and margin-left.

You'll probably want to add browser support with transform, -moz-transform etc.

CSS - center big div inside smaller one + hidden overflow

Got it! But with JavaScript ... http://jsfiddle.net/vT65S/10/

jQuery(function($){
    $(".container > *").each(function(){
       var m = ($(this).parent().innerWidth() - $(this).outerWidth())/2;
       $(this).css("margin-left", m);
    });
});

Maybe there is a solution with pure CSS (?)

---

Related Topics