Блог

У меня есть div с высотой и шириной 33,33%. Я хочу текст в середине div .

HTML

 <div class="blogs" id="content">
  <div id="blog1">tests</div>
  <div id="blog2"></div>
  <div id="blog3"></div>
</div>
  

CSS

 #blog1 {
  width: 33.33%;
  padding-bottom: 33.33%;
  background: red;
  float: left;
}
  

Как я могу это сделать?

Я предлагаю это:

HTML

 <div class="blogs" id="content">
    <div id="blog1">text in the middle
        <span>blog 1</span>
    </div>
   <div id="blog2"><span>blog 2</span></div>
   <div id="blog3"><span>blog 3</span></div>
</div>
  

css

  #blog1{
        width: 33.33%;
        /*padding-bottom: 33.33%;*/
        background: red;
        text-align: center;
        display:table-cell;
        vertical-align:middle;
        position: relative;
    }

.blogs > div > span{
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
}
 #blog2{
        width: 33.33%;
        padding-bottom: 33.33%;
        background: green;
        text-align: center;
        display:table-cell;
        position: relative;
    }
 #blog3{
        width: 33.33%;
        padding-bottom: 33.33%;
        background: blue;
        text-align: center;
        display:table-cell;
        position: relative;
    }

#content{
    display:table;
}
  

скрипка

И другой пример со статической шириной, например, 500px скрипка

Взгляните на эту скрипку.

Просто установите height и line-height равными и добавьте vertical-align:middle;

Ваш код будет выглядеть следующим образом:

 #blog1{
    width: 33.33%;
    height:300px;
    background: red;
    float: left;
    text-align:center;
    vertical-align:middle;
    line-height:300px; /* has to bee the same value as the height of the div */
}
  

 <div class="blogs" id="content">
   <div id="blog1">tests</div>
   <div id="blog2"></div>
   <div id="blog3"></div>

   <!-- You need to add this after the last <div> -->
   <div style="clear:right;"></div>
</div>

#blog1, #blog2, #blog3 {
   float:left;
   padding: 3% 0;
   background: red;
   width: 100px;
   height:100%;
   text-align:center;
}
  

JS Fiddle