admin管理员组

文章数量:1334887

I was trying to create a modal window which will be displayed in desktop browsers, mobile browser and tablets.

I want to make the absolute position of div at the same time, div should be in center of page in horizontal and vertical.

I tried the following

#outerdiv{
    top: 50%;
    left: 50%;
    position: fixed;
    width:100%;
    margin-left:0px;
}
#innerdiv{
    width:50%;
    height:100%
}

The above code auto fit the content to page. But how to make absolute position or center align in horizontal and vertical. I was displaying this div like a pop up.

I was trying to create a modal window which will be displayed in desktop browsers, mobile browser and tablets.

I want to make the absolute position of div at the same time, div should be in center of page in horizontal and vertical.

I tried the following

#outerdiv{
    top: 50%;
    left: 50%;
    position: fixed;
    width:100%;
    margin-left:0px;
}
#innerdiv{
    width:50%;
    height:100%
}

The above code auto fit the content to page. But how to make absolute position or center align in horizontal and vertical. I was displaying this div like a pop up.

  • javascript
  • html
  • css
Share Improve this question edited Sep 5, 2021 at 7:21 Super BUFF Meatballs 2251 silver badge13 bronze badges asked Jan 10, 2014 at 4:36 Pandiyan CoolPandiyan Cool 6,5858 gold badges53 silver badges90 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

This solution should scale gracefully with window size, and on resize too. We give the parent the width and height of the window like so:

body{
    height:100%;
    width:100%;
}

Then we specify the containing div to:

  1. Have half the height and width
  2. Pad the top and bottom by a quarter (a half of the space taken up)

Like so:

#innerdiv{
    position:fixed;
    width:50%;
    height:50%;
    top:25%;
    margin-left:25%;
    border: 1px black solid;
}

jsFiddle here: jsFiddle

To center align a div horizontally, the best trick I believe is:

left:50%;
margin-left:-"half the width"px;

For vertical alignment I would go with JavaScript and calculate the height of the screen

var height = $(window).height();
var div_height = $('#div').height();
$('#div').css('top', (height - div_height) / 2);

You could of course also apply this to a parent element by changing "window" to the parent.

Assuming the following html structure:

<body>
    <div id="yourDiv">
    <!-- modal content -->
    </div>
</body>

You can center your container with the following styles:

#yourDiv {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 500px;
    height: 500px;
}

Note: you'll need to give your container a height and width for the centering to work.

Here's a Fiddle.

I would go for a fixed size of the .popup.

.popup {
     height: 300px;
     width: 300px;
     position: fixed;
     top: 50%;
     left: 50%;
     margin: -150px;
   }

本文标签： javascriptHow to display a div to center of the page and auto fit content to page using cssStack Overflow

版权声明：本文标题：javascript - How to display a div to center of the page and auto fit content to page using css? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742368554a2461765.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。