Why is my top: 50% CSS not working?
Question
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>
5 answers
solution1
1 ACCPTED 2017-01-06 09:10:42
Add a height to the html element:
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.
solution2
0 2017-01-06 09:12:27
Remove position:relative from body and it would be in center
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>
solution3
0 2017-01-06 09:15:35
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>
solution4
0 2017-01-06 09:26:47
Make it easy. Use div instead of html and boy. HTML will like this.
<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
.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>
solution5
0 2017-01-06 10:49:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why is is top:50% in css not working?
Top: 50% is not working CSS
top:-50% not working?
CSS - margin top of 50% is more than 50%
Why is my css not working?
Top & left css values are not working in my code
Why is my outline top not showing in CSS?
CSS right: -50 and transition not working
Why is my CSS class not working
Why is my css transformation not working?
Related Tags