摘自：https://www.cnblogs.com/ones/p/4362531.html

DIV居中的几种方法

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居中的几种方式

DIV居中的几种方法

最新文章

热门文章