Larger Div Centered Inside Smaller 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 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 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.

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>

How to center text in a smaller div?

You can use left: 50%; on the text element which results in a position where left edge is at the center of the surrounding element. To correct this and postion the middle of the element at the center of the surrounding div you need to transform half of the text back to the left. You can archieve this with transform: translateX(-50%);. Moreover it is important, that the surrounding element has position: relative;.

Your example would look like this:

.container {  width: 100%;  height: 50px;  background: yellow;}  
a {    position: relative;    width: 100px;    height: 100px;    margin: 0 50px;    background: red;    white-space: nowrap;    float: left;}    span {    position: absolute;    left: 50%;    transform: translateX(-50%);    text-align: center;}

  <div class="container">    <a href="" class="box-1">      <span>Lorem</span>    </a>    <a href="" class="box-2">      <span>Lorem ipsum dolor sit amet</span>    </a>    <a href="" class="box-3">      <span>Lorem ipsum dolor sit</span>    </a>  </div>

How can I center a div within another div?

You need to set the width of the container (auto won't work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - Stack Overflow

In action at jsFiddle.

---

Related Topics