css實現的多行文字垂直居中程式碼例項

admin發表於2017-03-01
原文網址 : https://www.softwhy.com/article-2129-1.html
CSS

實現單行文字垂直居中效果，非常簡單隻要將行號和容器的高度設定為相同即可，程式碼如下:

[CSS] 純文字檢視 複製程式碼
height:30px;
line-height:30px;

但是對於多行文字上面的程式碼就不好用了，下面是一段能夠實現此功能的程式碼，如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
/*容器高度已定，多行文字居中*/
.container{
  width:200px;
  height:200px;
  border:3px solid #F00;
  display:table;
  overflow:hidden;
  *position:relative;
}
.box{
  display:table-cell;
  vertical-align:middle;
  *position:absolute;
  *top:50%;
}
.sub-box{
  width:200px;
  text-align:center;
  *position:relative;
  *top:-50%;
}
</style>
<body>
<div class="container">
  <div class="box">
    <div class="sub-box">螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天</div>
  </div>
</div>
</body>
</html>

相關文章