Java 一个块级标签元素在浏览器页面居中的实现

最新推荐文章于 2024-09-16 09:20:49 发布

little_kkk

最新推荐文章于 2024-09-16 09:20:49 发布

阅读量485

点赞数

本文链接：https://blog.youkuaiyun.com/qq_39497607/article/details/81193479

版权

本文介绍了一种利用CSS的position和margin属性使块级元素在页面上无论水平还是垂直方向都能保持居中的方法，常见于登录注册界面的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用position和margin实现一个块级元素在页面居中，无论左右或者上下拉动浏览器，该元素都保持居中；

.div1{

position: absolute; /* 绝对定位 相对于浏览器的定位 */ 
background: white;
top:200px;
width:400px;
height:300px;
left:50%;/* 左边框部分位于浏览器中间位置 此时整个块级元素并不居中 */
top:50%;
margin-left:-200px; /* 设置该块级元素左右居中 无论怎样左右拉动浏览器  左右居中 */
margin-top:-150px;
text-align: center;/* 块级元素内的子元素居中 常见于登录注册等界面 */
border-radius: 5px; /* 该块级元素边框设置为非直角 */

}