关闭

CSS水平垂直居中布局

标签: htmlcss布局
180人阅读 评论(0) 收藏 举报
分类:

水平垂直居中布局

HTML结构如下所示

<div class="parent">
    <div class="child">demo</div>
</div>

1. [inline-block + text-align] + [table-cell + vertical-align]

前半部分实现水平居中,后半部实现垂直居中

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
    display: inline-block;
}
  • 优点:兼容性很好,可兼容至IE6(*zoom)

2. [table + margin] + [table-cell + vertical-align]

把水平居中的方式变换一下

.parent {
    display: table-cell;
    vertical-align: middle;
}
.child {
    display: table;
    margin: 0 auto;
}
  • 优点同上

3. [absolute + transform]

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}
  • 优点:使子元素脱离文档流但是依然能相对父元素居中,可以用来设置弹窗等模块
  • 缺点:兼容性问题,可能需要添加浏览器前缀

4. [flex + justify-content + align-items]

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
  • 优点:只需在父元素上设置样式即可,代码简单
  • 缺点:除了兼容性问题还有性能问题,可以应用在小范围中

总结

水平垂直居中不是简单的组合水平居中和垂直居中,需要考虑实际环境和兼容性问题
比如说水平用[table + margin],垂直用[flex + align-items]由于两个的兼容性差距巨大,[table + margin]原本具有的兼容性优势就体现不出来了,显得不伦不类。

0
0

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