利用css实现盒子固定在浏览器居中显示
2021-05-23 本文已影响0人
oopsWeb
html+css实现在浏览器居中显示下面有两种方法，个人更推荐第一种利用transform方法实现居中
一、利用固定定位属性让盒子相对浏览器上左移动各50%，再上左移动自身50%
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: pink;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div></div>
</body>
二、利用定位和margin强制性居中显示
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: pink;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div></div>
</body>
