如何使一个DIV垂直居中与屏幕中间
发布网友
发布时间：2022-04-21 11:06
共2个回答
热心网友
时间：2022-04-22 00:47
div在不同的屏幕中上下左右都居中显示，可以用一段代码来写。
html部分：这个div在不同的屏幕里上下左右都能居中！css部分：.box{width:100px;height:100px;margin:0px
auto}宽高可以根据自己的情况来设置
热心网友
时间：2022-04-22 02:05
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<meta
name="author"
content="Chomo"
/>
<link
rel="start"
href="XXX"
title="Home"
/>
<title>根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶</title>
<style
type="text/css">
*
{
margin:0;
padding:0;
list-style:none;
font-size:14px;}/*---该css
reset仅用于demo，请自行换成适合您自己的css
reset---*/
html
{
height:100%;}
body
{
height:100%;
text-align:center;}
.centerDiv
{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:middle;
text-align:left;
width:200px;
padding:10px;
border:1px
solid
#f60;
background:#fc0;}
.hiddenDiv
{
height:100%;
overflow:hidden;
display:inline-block;
width:1px;
overflow:hidden;
margin-left:-1px;
zoom:1;
*display:inline;
*margin-top:-1px;
_margin-top:0;
vertical-align:middle;}
</style>
</head>
<body>
<div
class="centerDiv">
蓝色理想<br/>
蓝色理想<br/>
</div><div
class="hiddenDiv"></div>
</body>
</html>
