div居中的几种方式

时间：2018-07-08 14:42:58 阅读：171 评论：0 收藏：0 [点我收藏+]

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

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

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

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

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

缺点：需要设置div宽度

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

缺点：需要支持Html5

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

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

div居中的几种方式

标签：auto 分享图片网页代码而且 ems content 属性 web

原文地址：https://www.cnblogs.com/y-lin/p/9279893.html

踩

(0)

评论一句话评论（0）