CODEWITHSUNDEEP
csspopupmodal-dialog
sites
sites

Reputation: 21785

Centering Modal, or div when positioned

See this Fiddle, how can I center the blue div without fixed width and height in the parent and child?

This is to post in SO

<div class="parent">
<div class="child">
</div>
</div>

Update

These are positioned elements, I want child at the center of the screen.

Update 2

See it centered here, but I can't use fixed widths nor heights in parent neither children. I need positioned elements because I need them to be over other elements.

Upvotes: 0

Views: 718

Answers (5)

colecmc
colecmc

Reputation: 3308

Dynamic modals can be the biggest pains in the world. You need JS to change the heights and widths. Can you use a plugin? If so here are some good options. Twitter bootstrap has a modal that's very easy to get set up but it's challenging to load divs via ajax and iframes. You have to choose one or the other. simplemodal (http://www.ericmmartin.com/projects/simplemodal/) is good but you still need to do a lot of the work yourself. It works with iframes and ajax content.

Upvotes: 0

Praveen
Praveen

Reputation: 56501

I think this could solve your problem, but this needs JQuery[.width()].

.parent{
    position: fixed;    
    /* I can't use static width nor height, TO DELETE(try changing this)*/
    width: 500px;
    height: 400px;
    background: red;    
}

.child{
    display: inline-block;
    position: absolute; 
    /*Simulate width and height, these are actually calculated by content*/
    width: 100px;
    height:50px;
    background: lightblue;   
}

JQuery onLoad:[JSFiddle]

$(function changePostion() {
    var s = $(".parent").width(); 
    var e = $(".child").width();   
    var d= (s-e)/2;
    $(".child").css({"left":d}); 
    var sh = $(".parent").height(); 
    var eh = $(".child").height(); 
    var dh= (sh-eh)/2;
    $(".child").css({"top":dh});    
});

This article is a best tutorial for positioning html attribute in center. There might be a better way to do without using JQuery.

Upvotes: 0

Eli
Eli

Reputation: 14827

margin-top: -50%; /* why this takes the width of the parent ???? */

It's because your parent div has position: fixed and your child div has position: absolute and since absolute position element is positioned relative to the first parent element that has a position other than static.

So your child div will take a margin top and margin left with a value equal to -50% of your parent width which is -50% * 150 = 75px

Upvotes: 1

Ravi
Ravi

Reputation: 463

Try this it's display in center of width.

<div class="parent">
<div class="child">
</div>
</div>
<style type="text/css">
.parent{
}
.child{
    background: none repeat scroll 0 0 lightblue;
    height: 50px;
    margin: 0 auto;
    width: 150px;
}
</style>

Upvotes: 0

michael t
michael t

Reputation: 390

To center a div, you simply have to add this attribute:

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

or a more condensed version (assuming 0px for the top and bottom margin):

margin: 0px auto;

This assumes that you have some sort of width value on that element you want to center, whether fixed or a percentage. You shouldn't need anything in the parent to dictate the child's margins.

Upvotes: 5

Related Questions