CSS中使元素居中的总结

     在页面中，咱们常常会遇到要求居中的布局要求。今天偶尔有空，总结了一下居中的方法。有遗漏和错误的地方，欢迎你们指教。
     首先是横向居中的方法：
     1.margin: 0 auto;这种方法主要是针对div的居中布局，固然这个是须要div至少有宽度的； 2.text-align:center;这种方法使用普遍；3.display:inline-block;使用普遍例如ul>li、几个同级的div；
 4.float:left;left:50%;使用浮动居中，固然right也能够； 5.display:table-cell;主要使用在table中；6.width:200px;position:absolute;left:50%;经过定位的方式居中；
 7.margin-left:50%;使用盒子的margin方法，固然margin-right也是能够，可是注意减去width/2；8.padding-left：50%；经过使用padding扩大盒子的方法，固然padding-right也能够，可是注意减去width/2；
 9.使用使用自动外边距和文本对齐，例body{text-align:center;}   #container{margin-left:auto;margin-right:auto;width:168px;text-align:left;}；10.使用负外边距，例#container{position:absolute;
left:50%;width:760px;margin-left:-380px;}。固然在实际的使用中咱们主要是使用1,2,3,4,6,7,8这么6种方法。
     其次是纵向居中的方法：     
    1.vertical-align:middle;属性只适用于内联元素;2.height:100px; line-height:100px;经过行高纵向居中；3.position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;经过使用绝对定位+margin(auto)；4.position:absolute;top:50%;使用定位+top的方法居中 5.display:table-cell.在实际使用中咱们主要是使用一、二、4方法。
    以上就是我的对横向、纵向居中的总结。欢迎你们指正。