css实现使一个div位于页面正中间

最新推荐文章于 2022-07-20 00:44:40 发布

yth_m_123

最新推荐文章于 2022-07-20 00:44:40 发布

阅读量5.2k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/yth_m_123/article/details/106315894

版权

通过使用CSS的transform属性设置translate(-50%,-50%)，可以将一个div元素定位到页面的正中心。这种方法适用于vue项目，详细解释和效果见参考链接。" 129110208,17101146,Python3 面向对象编程详解,"['开发语言', 'Python', '面向对象编程']

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

笔者例子取于vue项目中

<template>
    <div class="login">
        <div class="topbar">
            <p>欢迎登录天下酒店客房管理界面平台</p>
        </div>
        <div class="loginbox">
        </div>
    </div>
</template>

css

.loginbox{
	width: 500px;
	height: 200px;
	border: 1px solid black;
	border-radius: 3px;
	box-shadow: 0px 0px 7px #cdcdcd;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
}