司徒正美居中方式

1. text-align:center  

　　　　用于水平居中inline文字或元素，在父元素中设置text-align:center;

　　2.  vertical-align:middle;

　　　　用于垂直居中inline文字或元素，配合display:table; 或是 display:table-cell; 有奇效

　　3.  line-height

　　　   让line-height的值等于height;

　　4.   margin:auto;

　　　　在元素中设置margin:auto;和一个给定的width，该元素在父元素中水平居中。

　　5.  hacks

　　　　有许多hacks，负margin，伪元素:before/:after等等，如果内容不固定，它们大部分很脆弱。

　　6.　translate(-50%,-50%)

　　　　positon加translate().  translate(-50%,-50%)中的百分比计算不是以父元素为基准，而是元素自身。也适用于内容不固定的元素。例如：min-width,max-　　　　　　　　height,overflow:scroll等等

　　7.   使用绝对定位position：absolute；

　　　　在父元素中设置position：relative；

　　　　

.absolute_center{
     width: 50%;
     height: 50%;
     overflow: auto;
     margin: auto;
     position: absolute;
     top: 0;
     left: 0;
 }

　　　　建议加上overflow:hidden;

　　8.   视口居中

　　　　同上，先在父元素中设置position：relative；

.absolute_center.isFixed{
     width: 50%;
     height: 50%;
     overflow: auto;
     margin: auto;
     position: fixed;
     top: 0;
     left: 0;
    z-index: 999;
 }

　　9.   响应式

　　　　百分比宽高，最大最小宽高也可以，加padding也可以

.absolute_center.isResponsive{
     width: 60%;
     height: 60%;
     min-width:400px;
     max-width:500px;
     padding:40px;
     overflow:hidden;
     margin: auto;
     position: absolute;
     top: 0;
     left: 0;
 }

　　10.   偏移

　　　　只要margin:auto;在，内容块将垂直居中，top left right bottom可设置偏移

.absolute_center.isRight{
     width: 50%;
     height: 50%;
     overflow: auto;
     margin: auto;
     position: fixed;
     top: 0;
     left: auto;
     bottom: 0;
     right:20px;
 }

　　11.   溢出

　　　　居中容器比父元素高时候，防止溢出加overflow:auto;没有padding时，也可以加max-width:100%;

　　12.   调整尺寸

　　　　设置resize属性，让尺寸可调，设置min-/max-限制尺寸，确定加了overflow:auto;

.absolute_center.isResizable{
    min-width:20%;
    max-width: 80%;
    min-height:20%;
    max-height: 80%;
    resize: both;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;

　　13.   图像

　　　　图像同样适用，设置height:auto;

.absolute_center.isImage{
    width: 50%;
    height:auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
 }

　　13.   可变高度

　　　　高度必须自定义，但可以是百分比或者max-height,不想定义的话可设置display:table;但要考虑到display:table-cell;的兼容性

.absolute_center.isVariable{
    display: table;
    width: 50%;
    overflow:auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
 }

　　14.   负margin

　　　　知道准确的宽高，margin是负的宽高的一半

　　15.  table-cell

　　　最外层设置display:table;  

　　　中间设置display:table-cell;   vertical-align:middle;

　　    最内层设置width:50%;margin:0 auto;