如何實現span元素垂直水平居中效果

admin發表於2017-03-05

本章節介紹一下如何將span元素實現在div中的水平垂直居中效果，希望能夠給需要的朋友帶來幫助。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<title>螞蟻部落</title> 
<style type="text/css">
.box{
  width:200px;
  height:100px;
  background:green;
  text-align:center;
  line-height:100px;
}
span{
  background:red;
}
</style>
</head>
<body>
<div class="box">
  <span>螞蟻部落</span>
</div>
</body>
</html>

相關文章