Making a div center inside another div

Question

I am new at html coding. I have been needing help with making a div in the middle of another div. Can anyone help me please.

<div class="wrapper">
    <div class="promo">
        <a href="link.com">Get Coupons!</a>
    </div>
</div>

I want promo to be in the middle of wrapper. How do I tell code to make it center. I have tried class = "center" but it doesn't work. I have tried style="center" but it doesn't work.

Please. thanks

Are you just trying to center the text within the `.wrapper`? — sbeliv01, Sep 17 '14 at 20:32
The solution depends in part on your existing CSS. Please include your existing CSS in your question. You also might want to check the "related" sidebar on the right side of this page for ideas. — showdev, Sep 17 '14 at 20:33
Centered horizontally? Centered vertically? Both? Does the containing div have width/height? Does the inner div have width/height? — showdev, Sep 17 '14 at 20:34
This certainly is a duplicate. The above question's answers give several methods that could be used to accomplish OP's goals (unless perhaps he's trying to center vertically as well, but that's really 2 questions. — Zach Lysobey, Sep 17 '14 at 20:41

score 1 · Accepted Answer · answered Sep 17 '14 at 20:39

1

welcome to SO.

This question has been asked many times on this site. The most common way of achieving this is to set the margin to auto.

The reason why class="center" does not work is because the class attribute assigns attributes to css and some. Currently you are telling the promo div to look for a class that does not exist. This is how you create the css for that.

.promo{
    width: 200px;
    height: 200px;
    margin: auto;
 }

You may also do the longer way of:

.promo{
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
 }

Here is a working fiddle to get you started. I have also added text-align: center; which will center your text in the promo div! (If that is what you want.)

answered Sep 17 '14 at 20:39

MatthewJames

112
1
10

what if height and width of both parent and child are set to 100%? this solution doesnt work for all cases. – Santiago Nicolas Roca Sep 17 '14 at 20:57
@SantiagoNicolasRoca - This is correct. However, OP didn't describe/ ask the question well enough. Also, great jQuery solution. However OP didn't add a jQuery or Javascript tag to the question. So I stayed away from using it. – MatthewJames Sep 17 '14 at 21:02
So, you should write a question under the post to clarify any doubt or provide an answer that can solve every case. – Santiago Nicolas Roca Sep 17 '14 at 21:05
showDev asked any question I had under the post. At the time the question did not have an answer yet so I wrote one. – MatthewJames Sep 17 '14 at 21:10

score 0 · Answer 2 · answered Sep 17 '14 at 20:37

I'll assume you want the div centered horizontally on the page, you can add this to your existing div to do so:

 style="display: table; margin: 0 auto"

Full code:

<div class="wrapper">
    <div class="promo" style="display: table; margin: 0 auto";>
        <a href="link.com">Get Coupons!</a>
    </div>
</div>

Santiago Nicolas Roca · Answer 3 · 2014-09-17T20:52:30.433

0

I would recommend using this function, even though its not the best way of doing it in most of the cases, in others cases its the only way to do it.

$(document).ready(function(){
  $(".center").each(function(){
   var height = parseInt($(this).parent().css("height"));
   var width = parseInt($(this).parent().css("width"));
   $(this).parent().css("overflow", "hidden");
   $(this).css({
     "margin-top" : ( height - parseInt($(this).css("height"))) / 2,
     "margin-left" : ( width - parseInt($(this).css("width"))) / 2
   });
  });
});

just set class="center" on the element you need to center and you are good to go.

<div class="wrapper">
    <div class="promo center">
        <a href="link.com">Get Coupons!</a>
    </div>
</div>

JSFiddle

edited Sep 17 '14 at 20:52

answered Sep 17 '14 at 20:45

Santiago Nicolas Roca

399
3
9

I don't understand this.. – bitsandbytes Sep 17 '14 at 20:49
are you using jquery? if you are you need to paste my code at the bottom of your html and add to class attribute center on those elements you need to center. In a moment ill provide a working fiddle as example. Ive just edited my code so be carefull to use this version because the previous one was wrong. – Santiago Nicolas Roca Sep 17 '14 at 20:54
If you belive this is the most accurate answer please mark it as such for future searchs. – Santiago Nicolas Roca Sep 17 '14 at 22:22
I didnt yuse this answer. I used the one that is markd correct. – bitsandbytes Sep 18 '14 at 00:53

Making a div center inside another div

3 Answers3