gpt4 book ai didi

html - 为什么我的top是: 50% CSS not working?

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

我正在做一个练习,虽然我之前已经垂直居中,但在这种情况下,我无法居中。

$( document ).ready(function() {

// Appears the search form input
$("#search").addClass("search-init");

}); // $(document).ready
body {
position: relative;
height: 100%;
width: 100%;
}

.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>

最佳答案

html 元素添加高度:

html { height: 100%; }

它会工作 - body 需要空间来占据,所以给 html 一个 100%,然后 body 可以占据完整的 100% 高度。

关于html - 为什么我的top是: 50% CSS not working?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41502260/

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