Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Larger div centered inside smaller div

Tags:

css

I have a div (#containment) inside another div (#edit). The outer div is smaller. The inner div's size will be changed by some jQuery code.

I want to make the inner div always centered inside of the outer div.

<div id="edit"><div id="containment"></div></div>

#edit {
    width:200px;
    height:200px;
    overflow:visible;
    margin-top:100px;
    background:gray;
}
#containment {
    width:500px;
    height:500px;
    opacity:0.5;
    background:red
}

fiddle

How can I do this?

like image 682
Ben Avatar asked Aug 06 '13 13:08

Ben


People also ask

How to make a div center within another div?

To horizontally and vertically center a div within a div on a page, you can use the position, top, left, and margin properties — if you know the width and height of the divs. To start, wrap a div element in another div element in your HTML.

Can you have div within div?

You can put a div inside an div but once you do that you can only put block elements (like divs) inside the first div. And if you put an inline element inside an div only inline elements can go inside the div.

How do I center an image in a smaller Div?

Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center."

How to center a div in a div horizontally?

Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.


2 Answers

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

like image 197
Kilian Stinson Avatar answered Sep 20 '22 15:09

Kilian Stinson


The child <div> should have the following CSS properties

position: relative;
width: 500px;
height: 500px;
left: 50%;
margin-left: -250px; /* -(width/2) */
top: 50%;
margin-top: -250px; /* -(height/2) */

So if you're changing the child div via jQuery then you must re-calculate the margins...

JSFiddle

http://jsfiddle.net/gvee/fzAge/5/

Initialised CSS

#edit
{
    overflow: hidden;
}

#containment
{
    background-image: url(http://placekitten.com/500/500);
    position: relative;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -250px;
}

JQuery

$('#edit').click(function() {
    var newWidth  = 100 + Math.floor(Math.random() * 500);
    var newHeight = 100 + Math.floor(Math.random() * 500);
    // Resize the child div
    $('#containment').width(newWidth).height(newHeight);

    // Let's assign a new background too, eh!
    $('#containment').css({'background-image': 'url(http://placekitten.com/' + newWidth + '/' + newHeight + ')'});

    // Now re-calculate the margins...
    var newLeftMargin = (newWidth  / -2);
    var newTopMargin  = (newHeight / -2);
    $('#containment').css({'margin-left': newLeftMargin, 'margin-top': newTopMargin});
});
like image 38
gvee Avatar answered Sep 20 '22 15:09

gvee