CODEWITHSUNDEEP
htmlcsscss-position
Rafa
Rafa

Reputation: 115

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>

Upvotes: 0

Views: 3019

Answers (5)

Santosh Khalse
Santosh Khalse

Reputation: 12710

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>

Upvotes: 0

Rahul
Rahul

Reputation: 2071

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>

Upvotes: 0

YSuraj
YSuraj

Reputation: 417

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>

Upvotes: 0

Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

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>

Upvotes: 0

Stuart
Stuart

Reputation: 6795

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.

Upvotes: 1

Related Questions