css怎么让定位的那个层显示在浏览器的正中间

发布网友发布时间：2022-04-06 11:47

我来回答

共6个回答

热心网友时间：2022-04-06 13:16

可以用css定位让指定层在浏览器正中间。

1、新建html文档，在body标签中添加一个div标签，为这个标签设置宽高，这里以200px为例：

2、添加定位代码“position: absolute;”，并且设置相对左侧和顶部的距离为“50%”：

3、最后设置指定层的左外边距和顶外边距的大小为指定层宽高的一半，这时指定层就会在浏览器的正中间：

热心网友时间：2022-04-06 14:34

例如,<body><div style='width:1000px;height:100px; margin:0 auto;border:1px solid red;'></div></body>
注意,border是我加的红色边框,方便看效果,当然,必须要加入文档声明(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
),否则IE浏览器下会失效,切记,希望对你有所帮助

热心网友时间：2022-04-06 16:09

例如，<body><div style='width:1000px;height:100px； margin:0 auto;border:1px solid red；'></div></body>
注意，border是我加的红色边框，方便看效果，当然，必须要加入文档声明(<，DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。

热心网友时间：2022-04-06 18:00

我是这么认为的!
.object{width:200px;height:200px;position:relative;left:50%;top:50%;border:1px#666666solid;margin-left:-100px;margin-top:-100px;}

热心网友时间：2022-04-06 20:08

比如：div 宽高都是 100px;

.div{
position: absolute;
left:50%;
top:50%;
margin-left:-50px;//-自身盒子宽度的50%
margin-top:-50px;//-自身盒子宽度的50%
}

热心网友时间：2022-04-06 22:33

如果那个层的尺寸固定的话，直接在css里写死top和left值即可。
left = (浏览器窗口宽度 - 层宽度)/2
top = (浏览器窗口高度 - 层高度)/2

如果层的尺寸不固定，就必须用Javascript来定位了。