css中position:fixed完成div垂直居中左右上下垂直居中

日期:2021-03-06 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

左右上下 垂直居中

编码以下

拷贝编码
编码以下:

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

假如只必须上下垂直居中,那末把 bottom:0; 或 top:0; 删除便可
假如只必须左右垂直居中,那末把 left:0; 或 right:0; 便可

下面附1个DIV 元素在访问器对话框垂直居中

实际上,完成这个实际效果其实不繁杂,运用 CSS 中的 position 精准定位便可以轻轻松松搞定了。看来看编码吧:

编码以下
 
拷贝编码
编码以下:

<style type="text/css">
.dialog{
position: fixed;
_position:absolute;
z-index:1;
top: 50%;
left: 50%;
margin: ⑴41px 0 0 ⑵01px;
width: 400px;
height:280px;
border:1px solid #CCC;
line-height: 280px;
text-align:center;
font-size: 14px;
background-color:#F4F4F4;
overflow:hidden;
}
</style>
<div class="dialog">我是在对话框正中间的,呵呵!</div>

 
设定的技能所有在这里:

编码以下

拷贝编码
编码以下:

.dialog{
position: fixed;
_position:absolute; /* hack for IE6 */
z-index:1;
top: 50%;
left: 50%;
margin: ⑴41px 0 0 ⑵01px;
width: 400px;
height:280px;
border:1px solid #CCC;
line-height: 280px;
text-align:center;
font-size: 14px;
background-color:#F4F4F4;
overflow:hidden;
}

设定 position: fixed; _position:absolute;
设定 left:50% 和 top:50%;
设定 margin: -(DIV的offsetWidth/2) 0 0 -(DIV的offsetHeight/2)
上一篇:苏州市关键瘟疫区包含什么? 返回下一篇:没有了