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>

Add fixed height to body. Means you have to give fix height to parent element to vertically center element — vedankita kumbhar, Jan 06 '17 at 09:09
Duplicate Question: http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Rahul, Jan 06 '17 at 09:11
It's not possible to do it with the full height of the window? — Rafa, Jan 06 '17 at 09:11

score 1 · Accepted Answer · answered Jan 06 '17 at 09:10

1

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.

answered Jan 06 '17 at 09:10

Stuart

6,630
2
24
40

score 0 · Answer 2 · answered Jan 06 '17 at 09:12

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>

score 0 · Answer 3 · answered Jan 06 '17 at 09:15

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>

Rahul · Answer 4 · 2017-01-06T09:42:20.960

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>

score 0 · Answer 5 · answered Jan 06 '17 at 10:49

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>

Why is my top: 50% CSS not working?

5 Answers5

Linked