在Web页面设计时，经常会用到div居中及其中内容居中这一最基本的布局样式，这里不罗列所有可行的方式，只记录我认为比较方便实用的方法。
1、div盒子自动居中
方法一：
top:50%;
left:50%;
transform:translate(-50%,-50%);
position:absolute;
此法基本原理为先X、Y轴50%定位，再盒子自身X、Y长度回撤50%，以达到自动居中的位置。
方法二：
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
此法基本原理是用div的margin的auto来实现自动居中。
这两个方法都很好用。
2、div盒子内容自动居中
在div的style里设置:
text-align:center;//水平居中
vertical-align:middle;//垂直剧中
但有时候vertical-align设置不是很有效，可以将行高与div高度设置成一致，简单而有效地实现垂直居中：
height:50px;
line-height:50px;