Having trouble centering a DIV element

Question

Here is my JSFiddle https://jsfiddle.net/xdmns7e4/

HTML:

    <!-- Stream starting soon alert popup -->
    <div class="streamStartingSoon" id="infor">
            <font color="white"><strong>Stream will begin shortly!</strong></font>
    </div>

CSS:

.streamStartingSoon{
    width: 250px; 
    height: 30px; 
    background-color: #65d1d4;
    opacity:0.9;
    text-align: center; 
    vertical-align: middle; 
    line-height: 30px; 
    position: absolute;
    top: 250px;

JS:

jQuery("#infor").delay(4000).fadeOut("slow");

I can't seem to get this code centered on my website... Any ideas?

Answer 1

You can horizontal center an absolute positioned element with adding 50% to the left minus the half of the width of your element (and same for the height):

.streamStartingSoon {
  left: 50%;
  margin-left: -125px; /* Half the width */
}

Whole code:

 jQuery("#infor").delay(4000).fadeOut("slow"); 

 .streamStartingSoon { width: 250px; height: 30px; background-color: #65d1d4; opacity: 0.9; text-align: center; vertical-align: middle; line-height: 30px; position: absolute; top: 50%; margin: auto; border-radius: 5px; left: 50%; margin-top: -15px; /* Half the height */ margin-left: -125px; /* Half the width */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Stream starting soon alert popup --> <div class="streamStartingSoon" id="infor"> <font color="white"><strong>Stream will begin shortly!</strong></font> </div> 

See this article on CSS-tricks .

transform: translate(-50%, -50%); is also possible, but negative margins are more compatible with old browsers.

Answer 2

Remove "position: absolute;" from your CSS and add Center tags

HTML

<!-- Stream starting soon alert popup -->
<div class="streamStartingSoon" id="infor">
    <center><font color="white"><strong>Stream will begin shortly!</strong</font></center>
</div>

CSS

.streamStartingSoon{
width: 250px; 
height: 30px; 
background-color: #65d1d4;
opacity:0.9;
text-align: center; 
vertical-align: middle; 
line-height: 30px; 
/*position: absolute;*/
top: 250px;}

Answer 3

Since you are positioning it absolutely. To move it around use top , bottom , left , right . set them all to 0.

Try this:

 jQuery("#infor").delay(4000).fadeOut("slow"); 

 .streamStartingSoon{ width: 250px; height: 30px; background-color: #65d1d4; opacity:0.9; text-align: center; vertical-align: middle; line-height: 30px; position: absolute; border-radius: 5px; margin: auto; display: block; top: 0; bottom: 0; left: 0; right: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="streamStartingSoon" id="infor"> <font color="white"><strong>Stream will begin shortly!</strong></font> </div> 

Answer 4

Look here for more information about div{display:table}, centering and ect.

 jQuery("#infor").delay(4000).fadeOut("slow"); 

 html,body{ /*it for .div-table, to calculate page height and width, but you can also change for any element which inherit (before) of .div-table*/ height:100%; width:100%; } .div-table{ width:100%; height:100%; display:table; } .div-center{ display: table-cell; vertical-align: middle; } .streamStartingSoon{ width: 250px; height: 30px; background-color: #65d1d4; opacity:0.9; text-align: center; line-height: 30px; border-radius: 5px; margin:0px auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Stream starting soon alert popup --> <div class="div-table"> <div class="div-center"> <div class="streamStartingSoon" id="infor"> <font color="white"><strong>Stream will begin shortly!</strong></font> </div> </div> </div>