css設定div水平居中程式碼例項

antzone發表於2017-03-02
CSS

本章節介紹一下如何讓一個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:300px;
  height:300px;
  background:red;
}
#box .demo{
  width:100px;
  height:100px;
  background:blue;
  margin:0px auto;
}
</style>
</head>
<body>
<div id="box">
  <div class="demo"></div>
</div>
</body>
</html>

以上程式碼實現了我們的要求，可以讓元素在指定元素中實現水平居中效果。

[CSS] 純文字檢視 複製程式碼
margin:0px auto;

以上程式碼是效果實現的關鍵，不要問為什麼，就是如此規定的。

相關文章