<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
margin: 0;
}
#div1{
border: 12px solid green;
height: 100%;
width: 100%;
font-size: 0;
position: relative;
}
div span{
background-color: green;
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 12px;
}
#up{
position: absolute;
left: 50%;
}
#down{
position: absolute;
left: 50%;
bottom: 0;
}
#left{
position: absolute;
top: 50%;
}
#right{
position: absolute;
top: 50%;
right: 0;
}
#center {
position: absolute;
background-color: yellow;
top: 50%;
left: 50%;
}
#more2{
position: relative;
top: 50%;
/*left: 50%;*/
}
#more3{
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<div id="div1">
<span id="up">上</span>
<span id="down">下</span>
<span id="left">左</span>
<span id="right">右</span>
<span id="center">中</span>
<span id="more1">我在哪?1</span>
<span id="more2">我在哪?2</span>
<span id="more3">我在哪?3</span>
<span id="more4">我在哪?4</span>
</div>
</body>
</html>
html元素的上下左右中
最新推荐文章于 2023-10-24 22:56:51 发布