我正在做一个练习，虽然我之前已经垂直居中，但在这种情况下，我无法居中。
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).readybody {
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/