我們在設計頁面的時候，經常要把p居中顯示，而且是相對頁面視窗水平和垂直方向居中顯示，如讓登入視窗居中顯示。
到現在為止，探討了很多種方法。
HTML：
<body>
<p class="maxbox">
<p class="minbox align-center"></p>
</p>
</body>效果圖（下面幾種方法效果圖一樣）：
第一種： CSS絕對定位
主要利用絕對定位，再用margin調整到中間位置。
父元素：
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}子元素：
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}水平垂直居中對齊：
.align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}#第二種： CSS絕對定位+ Javascript/JQuery
主要利用絕對定位，再用Javascript/JQuery調整到中間位置。相較於第一種方法，此方法提高了class的靈活性。
父元素：
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}子元素：
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}水平垂直居中對齊：
.align-center{
position: absolute;
left: 50%;
top: 50%;
}JQuery：
$(function(){
$(".align-center").css(
{
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
}
);
});第三種： CSS3絕對定位+ 位移
使用絕對定位與CSS3的transform: translate同樣也可以達到效果。
父元素：
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}子元素：
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}水平垂直居中對齊：
.align-center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /*向左向上位移*/
}第四種： Flexbox: [伸縮佈局盒模型]
要讓元素水平垂直，對於Flexbox模型來說太容易了。
這裡得改變一下HTML：
<p class="maxbox align-center">
<p class="minbox"></p>
</p>父元素：
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}子元素：
##
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}.align-center{
display: flex;
display: -webkit-flex; /*兼容问题*/
justify-content: center;
align-items: center;
}第二種使用腳本語言，相容性很好且彌補了第一種的缺點。不因width，height的改變而影響水平垂直居中的效果。
第三種使用CSS3的一些新的屬性，相容於IE10, Chrome, Firefox, 和 Opera。相容性不太很好，不因width，height的改變而影響水平垂直居中的效果。
使用Flexbox模型，相容於Firefox、Opera 和 Chrome，IE全軍覆沒。也是不因width，height的改變而影響水平垂直居中的效果。
