固定宽度实现页面自适应居中
-
- 说明
- css代码
- Index代码
- 演示图
说明
演示效果分辨率为1980x1080分辨率效果
width设置为1336px使在分辨率为1366x720的浏览器不出现左右移动框
使用margin来控制浮动
css代码
body {
}
.container{
width: 1336px;
margin: 0 auto;
}
Index代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
body {}
.container{
width: 1336px;
height: 1000px;
margin: 0 auto;
background: gray;
}
</style>
<body>
<div class="container">
<h1 style="color: #FFF;">container居中</h1>
</div>
</body>
</html>
演示图
![【web素材】01-10款大气的购物商城网站模板[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)