文章标题

1.使用table来实现

.child{display: table; margin: 0 auto;}
   优势:不需要父容器parent,只需要对自身进行设置
   劣势:IE6、7需要调整结构

2.使用inline-block和text-align来实现

.parent{text-align: center;}
.child{display: inline-block;}
   优势:兼容性好
   劣势:需要同时设置子元素和父元素

3.使用绝对定位absolute来实现

   使用绝对定位来实现水平居中布局有两种情况,一种子容器无宽度,另一种子容器有宽度。无宽度可以用一下代码,如果是有宽度,则可以设置margin-left负值为容器宽度的一半。
.parent{position: relative;}
.child{position: absolute; left: 50%; transform: translateX(-50%);}
   优势:无需设置容器宽度,在移动端可以使用
   劣势:兼容性差,需要IE9及以上浏览器的支持

4.使用flex布局来实现

   flex有两种方法来实现水平居中,父容器设置display:flex, 一种直接在父容器中设置justify-content属性值center。第二种在子容器中使用margin: 0 auto
.parent{display: flex; justify-content: center;}   
.child{margin: 0 auto;}
   优势:实现起来简单,尤其是使用在响应式布局中
   劣势:兼容性差,如果大面积的使用该布局可能会影响效率
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34960569/article/details/52355462
文章标签: html+css布局
个人分类: html
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

文章标题

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭