码迷,mamicode.com
首页 > 其他好文 > 详细

DIV居中的几种方法

时间:2018-08-15 13:30:38      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:pre   isp   nsf   -o   div   justify   toolbar   页面   web   

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;

}

DIV居中的几种方法

标签:pre   isp   nsf   -o   div   justify   toolbar   页面   web   

原文地址:https://www.cnblogs.com/borter/p/9480840.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!