网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
css吧 关注：63,431贴子：458,661
  • 13回复贴，共1页

如何让一个100*100的DIV框显示在屏幕正中央，上下左右都居中？

我自己现在只会弄到这种效果，但是好像上下居中不知道这么弄才能自适应，求教！
只用DIV+CSS的方法来弄。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
border: #000 solid 2px;
margin: 0 auto;
margin-top: 300px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
效果就像这样：




2025-11-06 17:09:22
广告
不感兴趣
开通SVIP免广告
设置了margin:0 auto的话，就不要设置margin-top 的值了，这两个一起写的话，是会存在影响的


box里面，margin:auto,margin-top去掉


我评论的怎么被删掉了
绝对定位啊啊啊啊啊啊


<!--
在来一个给楼主参考一下
不过好像有缺点

-->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
html,body
{
width:100%;
height:100%;
}
#main
{
width:100%;
height:100%;
text-align:center;
}
#main:before
{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
#box_wrap
{
display:inline-block;
vertical-align:middle;
}
#box
{
width: 100px;
height: 100px;
border: #000 solid 2px;
/*
margin: 0 auto;
margin-top: 300px;
*/
}
</style>
</head>
<body>
<div id="main">
<div id="box_wrap">
<div id="box"></div>
</div>
</div>
</body>
</html>


margin


#box{
width:100px;
height:100px;
border:2px solid #000;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 13回复贴，共1页
分享到: