CSS 垂直置中解法

相信大家在 Google 可以找到很多解法,這幾天在 Facebook 發現更精彩的解決方式,就是用 CSS:beforeinline-block,底下提供範例:

html 程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="ot">
    <div class="wrapper"></div>
  </div> 
</body>
</html>

CSS 程式碼

.ot {
  width: 400px;
  height: 400px;
  border: 1px solid #FF6600;
  text-align: center;
  margin: 0 auto;
}

.ot:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

.wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  background: #ccc;
}

Demo 結果

JS Bin

感謝留言提供一個不錯的教學連結: 未知高度多行文本垂直居中,可以讓文字置中,也是透過上述方法。一般單行文字置中,可以透過底下方式

.text {
  height: 26px;
  line-height: 26px;
}

如果是多行文字呢?也就是如果透過 P 標籤來顯示

xxxxxxxxxxx

*{margin:0;padding:0;}

.box{
  height:200px;
  width:300px;
  background:pink;
  margin:30px auto;
  font-size:0;
}
.box:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.text{
  display: inline-block;
  font-size:16px;
  vertical-align: middle;
}

Demo 如下

多行文本未知高度垂直居中-by一丝