Home  >  Article  >  Web Front-end  >  position:fixed in css to achieve div centering_html/css_WEB-ITnose

position:fixed in css to achieve div centering_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:56:221029browse

Centered up, down, left and right

Copy the code as follows
div{
position:fixed;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
width:200px;
height:150px;
}

If you only need left and right Center, then delete bottom:0; or top:0;
If you only need to center top and bottom, then delete left:0; or right:0;

Attach a DIV element below Center the browser window

In fact, it is not complicated to achieve this effect. It can be easily accomplished by using position positioning in CSS. Let’s take a look at the code:

Copy the code as follows

I am in the center of the window, hehe!

All the setting techniques are here:

The code is as follows Copy the code
.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's offsetWidth/2) 0 0 -(DIV's offsetHeight/2)
from:http://www.111cn.net/cssdiv/css/62281.htm

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn