Position: fixed in css implements div center and fixeddiv

Position: fixed in css implements div center and fixeddiv

Center between top, bottom, and left

The Code is as follows:
Div {
Position: fixed;
Margin: auto;
Left: 0;
Right: 0;
Top: 0;
Bottom: 0;
Width: 200px;
Height: 150px;
}

If you only need to center in the left-right corner, delete bottom: 0 or top: 0.
If you only need to center up and down, set left: 0; or right: 0 ;.

The following is a DIV element that is centered in the browser window.

In fact, it is not complicated to achieve this effect. You can easily locate the position in CSS. Let's look at the Code:

The Code is as follows:
<Style type = "text/css">
. Dialog {
Position: fixed;
_ Position: absolute;
Z-index: 1;
Top: 50%;
Left: 50%;
Margin:-141px 0 0-201px;
Width: 400px;
Height: 280px;
Border: 1px solid # CCC;
Line-height: 280px;
Text-align: center;
Fon (www.111cn.net) t-size: 14px;
Background-color: # F4F4F4;
Overflow: hidden;
}
</Style>

<Div class = "dialog"> I am in the center of the window! </Div>

The setting tips are as follows:

The Code is as follows:
. Dialog {
Position: fixed;
_ Position: absolute;/* hack for IE6 */
Z-index: 1;
Top: 50%;
Left: 50%;
Margin:-141px 0 0-201px;
Width: 400px;
Height: 280px;
Border: 1px solid # CCC;
Line-height: 280px;
Text-align: center;
Font-size: 14px;
Background-color: # F4F4F4;
Overflow: hidden;
}

Set position: fixed; _ position: absolute;
Set left: 50% and top: 50%;
Set margin:-(DIV offsetWidth/2) 0 0-(DIV offsetHeight/2)
From: http://www.111cn.net/cssdiv/css/62281.htm

Position: How to center fixed div

Div {position: fixed; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 150px ;}

How does css align the upper and lower sides of a div with the right alignment?

Center up and down · this must be calculated using js · There are many ways to align right · position: fixed; right: 0; in this way, you can scroll right and with the scroll bar. The position is always fixed. If you want to create a small window in the lower right corner, pure css cannot solve the problem ·