关闭

文章标题

标签: html+css布局
45人阅读 评论(0) 收藏 举报
分类:

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;}
   优势:实现起来简单,尤其是使用在响应式布局中
   劣势:兼容性差,如果大面积的使用该布局可能会影响效率
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4005次
    • 积分:208
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档