DIV居中的几种方法

原文链接： http://www.cnblogs.com/justuntil/p/7447355.html

DIV居中的几种方法

 

1.

1 body{  
2 text-align:center;  
3 } 

缺点：body内所有内容一并居中

 

2.

.center{
position: fixed;
left: 50%;
}

缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

 

3.

1 .center{
2 width:500px;
3 margin: 0 auto; 4 }

缺点：需要设置div宽度

4.

1 .center {  
2   display: -webkit-flex;  
3  -webkit-justify-content: center; 4  -webkit-align-items: center; 5 } 

缺点：需要支持Html5

5.

1     .center {
2         position: absolute;
3  top: 50%; 4  left: 50%; 5  -ms-transform: translate(-50%,-50%); 6  -moz-transform: translate(-50%,-50%); 7  -o-transform: translate(-50%,-50%); 8  transform: translate(-50%,-50%); 9 }

缺点：需要支持Html5

6.

1     margin: auto;
2     position: absolute;
3  left: 0; 4 right: 0;

 7.parent{

justify-content:center;

align-items:center;

display:_webkit-flex;

}

转载于:https://www.cnblogs.com/justuntil/p/7447355.html