Center content in the middle of div container

Question

I'm trying to create a "tile" (square block) with content centered perfectly in the middle of it.

Here's the HTML

  <div class="tile-facebook">
    <h5>Facebook</h5>
    <div class="tile-notification">4</div>
    <h4>notifications</h4>
  </div>

And the CSS

.tile-facebook{
  width:175px;
  height:175px;
  background: #3b5998 ;
  text-align: center;
  border-radius: 10px;
  border-style: solid;
  border-color: #ccc;
  border-width:1px;
  color: white;
}

.tile-notification{
  font-size:80px;
  font-weight:bold;
  padding:10px 0px;

}

I've got the text in the middle of the block, however I want it to be directly in the middle with the same padding from the top and bottom. Thoughts?

oki, just made an answer of it with some links about vertical padding/margin :) — G-Cyrillus, Mar 04 '14 at 18:28

G-Cyrillus · Accepted Answer · 2014-03-04T19:00:54.823

You might not set the height , but use a pseudo or extra element to draw your square from any width of your boxe.

vertical padding at 100% + inline-block is a way to draw a square and add content in its middle.

<div class="tile-facebook">
    <div class="wrapper">
        <h5>
            Facebook
        </h5>
        <div class=" tile-notification ">
            4
        </div>
         <h4>
             notifications
        </h4>
    </div>
</div>

.tile-facebook {
    width:175px;
    background: #3b5998;
    text-align: center;
    border-radius: 10px;
    border-style: solid;
    border-color: #ccc;
    border-width:1px;
    color: white;
}
.tile-notification {
    font-size:80px;
    font-weight:bold;
}
.tile-facebook .wrapper * {
    margin:0;
}
.tile-facebook:before {
    padding-top:100%;
    content:'';
}
.tile-facebook:before,
.wrapper {
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/cnq82/

some explanation about vertical % padding or margin : http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

So, (hope it makes it a bit more clear : ) )

If you give a vertical padding of 100% its height will be equal to width of parent.

If you want height to be taller of 20px you can do : padding:100% 0 20px 0 ; or padding:20px 0 100% 0;

If you want a box with a ration of 4:3 , just do padding-top:75%; or padding:50% 0 25% 0;.

pseudo or extra element can be floatting, or inline-block for vertical alignment.

You do not need to set a width in parent's CSS.

you should add some note about how to change the height of the outer box (as the OP did in his fiddle) , btw looks like we have to change the `padding-top` of the `:before` element instead, the OP should note about that in case he wants to increase or decrease the height a little. — King King, Mar 04 '14 at 18:47
links on W3C , if read explains it all :) 100% on padding gives 100% of width padding-top and bottom allow to mix % and any other values . 100% gives a ratio of 1:1 etc ... :) Question was about a square i believe :) — G-Cyrillus, Mar 04 '14 at 18:52

pstenstrm · Answer 2 · 2014-03-04T18:37:15.387

1

This fix tequires that the contents height never changes, and you need to add another <div>.

<div class="tile-facebook">
  <div class="center">
    <h5>Facebook</h5>
    <div class="tile-notification">4</div>
    <h4>notifications</h4>
  </div>
</div>

And add the CSS:

.title-facebook {
    position: relative;    
}

.center {
    position: absolute;
    top: 50%;
    margin-top: -[half height];
    left:0;
    width: 100%;
}

Where [half height] is half the height of the .center div.

edited Mar 04 '14 at 18:37

answered Mar 04 '14 at 18:21

pstenstrm

6,339
5
41
62

Running this in a jsfiddle makes the text overflowing the bottom and left edges of the blue div grossly. – TylerH Mar 04 '14 at 18:25
1

I've added `left: 0; width: 100%;` which fixes that. I only focused at height and forgot that other dimenson... – pstenstrm Mar 04 '14 at 18:38
this is better to use `transform:translate` instead of setting `margin-top` manually which is not very flexible, however it's simpler while using transform requires us to add some various versions of vendor prefixes so that the css works across browsers. – King King Mar 04 '14 at 19:15

score 0 · Answer 3 · answered Mar 04 '14 at 18:21

0

Add margin: -30px; to your CSS here:

.tile-notification {
    font-size:80px;
    font-weight: bold;
    padding: 10px 0px;
    margin: -30px;
}

answered Mar 04 '14 at 18:21

TylerH

20,799
66
75
101

Center content in the middle of div container

3 Answers3

Linked