最近开发Demo需要把内容展示在最中心的一个主体盒子里面,四周展示下层的背景
一开始用的是外边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mytext">
</div>
<style type="text/css" >
#mytext{
width: 200px;
height: 200px;
background-color: aqua;
margin: auto;
}
</style>
</body>
</html>
但是更不达不到效果,上面这样只能水平居中,不能垂直也居中,网上好多方法试了都不行,最后逼得没办法了,干脆用了固定定位,根据盒子本身的大小调试了一个差不多和距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mytext">
</div>
<style type="text/css" >
#mytext{
width: 500px;
height: 300px;
background-color: red;
position: fixed;
top: 30%;
left:35%;
}
</style>
</body>
</html>