HTML5中的div居中技術
在HTML5中，設計師要求將頁面中的內容元素居中是非常常見的。其中，使用
標簽是最普遍的做法。通過使用CSS樣式可以實現在頁面中水平居中和垂直居中的效果，下面將對這兩種情況進行介紹。
1. 水平居中
首先，我們需要給目標元素設置一個固定的寬度，比如400px。然后，使用margin:auto樣式，就可以輕松實現水平居中。
示例代碼如下：
<style>p{
width:400px;
margin:auto;
}
</style>以上代碼將一個p標簽居中顯示，其寬度為400px。
2. 垂直居中
垂直居中要比水平居中難一些，主要有兩種方法：
方法一：使用flex
在CSS3中，flex布局已經成為了一種非常流行的CSS樣式布局方式。使用flex布局將目標元素垂直居中非常簡單。首先，在父元素上設置display:flex；justify-content:center；align-items:center；即可實現目標元素的垂直居中。
示例代碼如下：<style>.parent{
display:flex;
justify-content:center;
align-items:center;
height:300px;
}
.child{
width:200px;
height:100px;
}
</style><div class="parent"><div class="child">這是要居中的內容
</div></div>以上代碼將一個元素垂直居中，且其高度為300px。可以調整父元素的高度和目標元素的高度來適應任何實際情況。
方法二：使用position
使用CSS的position布局也可以實現垂直居中。首先，需要將目標元素的position設為absolute，然后再將其top和left屬性都設置為50%。最后，再將目標元素的margin-top和margin-left屬性都設置為其高度和寬度的一半，即可完成垂直居中。
示例代碼如下：
<style>.parent{
position:relative;
height:300px;
}
.child{
position:absolute;
top:50%;
left:50%;
width:200px;
height:100px;
margin-top:-50px;
margin-left:-100px;
}
</style><div class="parent"><div class="child">這是要居中的內容
</div></div>以上代碼將一個元素垂直居中，且其高度為300px。
總結
以上就是HTML5中使用
標簽實現元素居中的兩種方法，分別是水平居中和垂直居中。掌握這兩種方法之后，設計師就能夠快速有效的實現頁面元素的居中效果。