對于web開發中的頁面布局，很多時候都要用到居中這個操作。而使用css來實現div元素的居中，相對簡單和方便。下面介紹兩種實現方法：

水平居中

將要居中的div定義寬度，然后使用margin:0 auto;來實現水平居中。代碼如下：

<style>
.box{
width: 350px;
margin: 0 auto;
background-color: #f1f1f1;
padding: 10px;
}
</style>
<div class="box">
<p>這里是要居中的內容</p>
</div>

垂直居中

要實現div的垂直居中，需要先設置其父元素的display值為table-cell，然后vertical-align設置為middle。代碼如下：

<style>
.wrapper{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box{
display: inline-block;
background-color: #f1f1f1;
padding: 10px;
}
</style>
<div class="wrapper">
<div class="box">
<p>這里是要居中的內容</p>
</div>
</div>

注意：使用垂直居中的方法，要實現的層必須嵌套在一個被設置display:table的父級元素中。