[英]Why is my top: 50% CSS not working?
I'm doing an exercise and although I've centered vertically previously, in this case, I'm not being able to center it. 我正在做一个练习,尽管我以前已经垂直居中,但是在这种情况下,我无法居中。
$( 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>
Add a height to the html
element: 向
html
元素添加高度:
html { height: 100%; }
and it will work - the body needs space to occupy, so giving html
a 100%, the body can then occupy the full 100% height. 它将起作用-身体需要占用空间,因此给
html
100%,然后身体可以占据整个100%的高度。
Remove position:relative
from body
and it would be in center 移开
position:relative
body
,它将居中
Here is updated code 这是更新的代码
$( 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>
Declare body position with 'absolute'. 用“绝对”声明身体位置。
$( document ).ready(function() { // Appears the search form input $("#search").addClass("search-init"); }); // $(document).ready
body { position : absolute; height: 100%; width: 100%; } .search-init{ height: 5rem; width: 5rem; border: 2px solid green; border-radius: 2.5rem; position : absolute; top : 50%; left: 50%; transform: translate(-50%, -50%); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div id="search"> </div> </body> </html>
Make it easy. 轻松点 Use div instead of html and boy.
使用div代替html和boy。 HTML will like this.
HTML会喜欢这样。
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/250x150/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
CSS 的CSS
.box-table{
display: table;
height: 500px;
margin-left: auto;/* If you want to center this box */
margin-right: auto;/* If you want to center this box */
text-align: center;
width: 500px;
}
.box-table{ /* This CSS for full window */
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
body{ background-color: #ff0000; margin: 0; padding: 0; } .box-table{ background-color: rgba(0, 0, 0, 0.85); bottom: 0; display: table; height: 100%; left: 0; overflow-x: hidden; overflow-y: auto; padding-right: 17px; position: fixed;/* You can use absolute */ right: 0; text-align: center; top: 0; width: 100%; } .box-table-cell{ display: table-cell; height: 100%; vertical-align: middle; width: 100%; } img{ vertical-align: middle; }
<html lang="en"> <body> <div class="box-table"> <div class="box-table-cell"> <img src="http://placehold.it/600x350/121212/ffffff?text=Vertically+center+imag" /> </div> </div> </body> </html>
Try this 尝试这个
$( document ).ready(function() { // Appears the search form input $("#search").addClass("search-init"); }); // $(document).ready
body,html { 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.