html-how to use CSS to align the pop-up window horizontally and vertically in a percentage layout

PC-side let a pop-up window horizontal and vertical center, in the knowledge that the window width is very good calculation, only need to use the following CSS:

#date {        width:300px;       height:300px;    Position:absolute;        top:50%;        left:50%;        Margin-left: -150px;        Margin-top: -150px;}

But to the mobile side, if write percentage layout, height is not OK, so the center of the window will become difficult, today encountered this problem, Baidu a bit, see this friend's information, (http://www.shejidaren.com/ centering-percentage-widhtheight-layout.html), this friend's CSS code is as follows:

. center{        width:50%;        height:30%;        Position:absolute;        top:50%;        left:50%;        -moz-transform:translate ( -50%, -50%);       -ms-transform:translate ( -50%, -50%);        -webkit-transform:translate ( -50%, -50%);        Transform:translate (-50%,-50%);}

Try it and get the effect you want,

But if we do not determine the height of the case, the height:30% removed, do not set the height of the value, will find that the pop-up window will be based on their own content to achieve vertical center, the main CSS code is as follows:

. center{        width:50%;        Position:absolute;        top:50%;        left:50%;        -moz-transform:translate ( -50%, -50%);       -ms-transform:translate ( -50%, -50%);        -webkit-transform:translate ( -50%, -50%);        Transform:translate (-50%,-50%);}

The effect is as follows (the pop-up section is a gray background area):

This can be very good to get what you want, horizontal and vertical center of the pop-up window effect pull, we can try ~

html-how to use CSS to align the pop-up window horizontally and vertically in a percentage layout