神奇的 CSS 垂直置中

Written by Simon Asika on

從 Front-End Developers Taiwan 看到的方法，原文在此

CSS

.box--middle:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.box--middle {
  text-align: center;
}
.box--middle > * {
  vertical-align: middle;
}

/* 以下只是樣式 */

.box--middle {
  background: #F1B1F1;
  width: 200px;
  height: 200px;
}
.box--middle img{
  width: 120px;
  height: 120px;
}

HTML

<div class="box--middle">
  <img src="http://images.sodahead.com/profiles/0/0/2/4/0/9/7/2/1/I-like-when-girls-kiss-girls-42672842512.jpeg">
</div>

效果請看這邊

Control Tools

WS-logo