CSS 垂直置中解法

 Posted on July 4, 2013  |  1 minutes  |  178 words  |  appleboy

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

html 程式碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!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 程式碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

.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{.jsbin-embed}

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

1
2
3
4

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

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

xxxxxxxxxxx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

*{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一丝{.jsbin-embed}

CSS  inline-block 

See also