相信大家在 Google 可以找到很多解法，這幾天在 Facebook 發現更精彩的解決方式，就是用 CSS:before 跟 inline-block，底下提供範例:
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;
}
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 結果
感謝留言提供一個不錯的教學連結: 未知高度多行文本垂直居中，可以讓文字置中，也是透過上述方法。一般單行文字置中，可以透過底下方式
.text {
height: 26px;
line-height: 26px;
}
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;
}
.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 如下