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?

Answer 1

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.

Answer 2

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.

Answer 3

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

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