就是效果实现一：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.container{width: 1200px;height: 2000px;border: 1px solid red;/* 居中 */margin: 0 auto;}</style></head><body><div class="container"></div></body>
</html>
二
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.container{width: 1200px;height: 2000px;border: 1px solid red;/* 居中 */position:absolute;left: 50%;margin-left: -600px;}</style></head><body><div class="container"></div></body>
</html>
水平和垂直方向上div居中的实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位</title><style>.msg{/* 块或者文字都是往左上靠近的 */width: 800px;height: 2000px ;border: 1px solid red;/* 绝对定位，默认是0.0点 */left: 50%;margin-left: -400px;/* top: 100px; */position: relative;}/* 所有的定位丢失相当于父级进行定位的，父级可以是绝对或者相对定位，如果没有父级，就会以body作为父级 *//* 父相子绝 */.msg>.box{width: 200px;height: 300px;border: 1px solid black;background:blue;position: absolute;top: 0px;left: -200px;}.goto{width: 80px;height: 80px;font-size: 23px;/* 光标呈现为指示链接的指针（一只手） */cursor:pointer;border: 1px solid red;text-align: center;line-height: 40px;background: peachpuff;border-radius: 10px ;color: white;/* 浮动定位 */position: fixed;right: 50px;bottom: 100px;left: 50%;margin-left: 400px;top: 50%;margin-top: 200px;}</style></head><body style="height: 1200px;"><div class="msg"><div class="box"></div></div><div class="goto">回到<br>顶部</div></body>
</html>