よく使うCSS小技まとめ(IE8〜)

個人的によく使うので備忘録。
随時更新予定！

画像系

画像を中央に表示

<div class="wrap">
  <img src="http://placekitten.com/g/500/600" alt="">
</div>

html,body{
  width: 100%;
  height: 100%;
  margin: 0;
}
.wrap{
  position: relative;
  width: 100%;
  height: 100%;
}
.wrap img{
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

DEMO

clearfix系

:afterでclearfix

overflow:hidden;が使えないときに便利。

.fl_wrap:after{
  content: "";
  clear: both;
  display: block;
}

DEMO

レスポンシブ系

レスポンシブっぽく要素を横並びさせたい

※marginが効かないのでpaddingで調整する必要がある。

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.wrap{
  width: 100%;
  display: table;
}
.wrap .item{
  display: table-cell;
}

DEMO