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

html-css025

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

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

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

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

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

最简单的方法：给图片单独套个div，给div做margin设置就好了，设置用百分比，具体如下

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图片居正中间__郭凯旗</title>

<style>

html{height:100%width:100%}

body{height:100%width:100%}

.d1{width:300px

height:200px

background:red

position:fixed

top:50%

margin-top:-100px

left:50%

margin-left:-150px

}

.d1 img{width:100%height:100%}

</style>

</head>

<body>

<div class="d1">

<img src="1.jpg"/>

</div>

</body>

</html>