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
}
How can I do this?
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.
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.
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."
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.
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
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...
http://jsfiddle.net/gvee/fzAge/5/
#edit
{
overflow: hidden;
}
#containment
{
background-image: url(http://placekitten.com/500/500);
position: relative;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
}
$('#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});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With