让一个div居于页面正中间的三种方法

2024-07-14 20:16| 来源: 网络整理| 查看: 265

1. .div1{ width: 100px; height: 100px; background: #eee; border: 1px solid #ccc; position: absolute; left: 50%;top: 50%; margin-left: -50px; margin-top: -50px; }

这几行在#login_box中的目的是使其在浏览器中水平居中显示。（无论浏览器被如何拉伸，该login_box始终保持居中）

原理（对齐浏览器的中心点与#login_box的中心点，这样就使得.foot在浏览器中水平居中了）： left:50%; 使div1 左边框顶点距离浏览器左边50% ，所以div1整体并不是位于浏览器中间，需要使用margin-left: -50px; 使div1向左移动50像素（div1自身宽度的一半）。这样box整体就位于浏览器中间了。 top: 50%; margin-top: -50px 的道理同上。

.div2{ width: 200px; height: 200px; background: #eee; border: 1px solid rgb(204, 204, 204); position: absolute; left: 50%;top: 50%; transform: translate(-50%,-50%); }

translate(-50%, -50%)，第一个值是指水平移动量，和tansform的translateX效果一样，第二个值那就是垂直方向偏移量，但为负数时，代表反方向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。

2. .div3{ width: 300px; height: 300px; background-color: #eee; border: 1px solid #ddd; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

【本文地址】

公司简介

联系我们