gpt4 book ai didi

css - 我在 div 元素位置有问题

转载 作者:太空宇宙 更新时间:2023-11-04 06:12:26 24 4
gpt4 key购买 nike

我试图响应式地将 div 元素定位在中心,但左上角的行为却如我所愿(它进入中心而不是整个 div),我该怎么办?

<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<div class="container"></div>
<input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()"></button>
<p id="text"></p>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
body {
background-color: rgba(75, 75, 75, 0.7); }

.container {
background-color: white;
height: 360px;
width: 640px;
position: absolute;
top: 50%;
left: 50%;
}

最佳答案

使用 translate(-50%,-50%) 它会在 Y 轴和 X 轴上移动到其高度和宽度的 50%。

body {
background-color: rgba(75, 75, 75, 0.7);
}

.container {
background-color: white;
height: 200px;
width: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /** add this **/
}
<!DOCTYPE html>
<html>
<body>
<div class="container"></div>
<input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()">
<p id="text"></p>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>

关于css - 我在 div 元素位置有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56313676/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com