css水平居中垂直居中常用的方式

水平居中

1

margin: 0 auto;

2

position: fixed; 
left: 50%;

3

margin:auto;
position: absolute; 
left: 0; 
right: 0;

4

     width: 500px;
     height: 500px;
     border: 1px #ccc solid;
     background:red;  
     position:absolute;  
     left:50%;  
     border-radius: 5px;  
    -webkit-transform:translate(-50%);

5

width: 50px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -25px;

垂直居中

width: 500px;
height: 500px;
border: 1px #ccc solid;
background:red;  
position:absolute;  
top:50%;  
-webkit-transform:translate(0,-50%);

     父元素加  display: table; 
     子元素加 display: table-cell;  vertical-align: middle;

width: 50px;  
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;

4

width: 500px;
height: 500px;
border: 1px #ccc solid;
position: absolute;
margin: auto;
top: 0;
bottom: 0;