关闭

CSS垂直居中布局解决方案

标签: css解决方案ie 6布局
78人阅读 评论(0) 收藏 举报
分类:

垂直居中布局解决方案

HTML结构如下

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

1. table-cell + vertical-align

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

2. absolute + transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
}
  • 优点:脱离文档流,不占据文档空间
  • 缺点:兼容性问题,不支持IE678,其他浏览器可能需要加前缀

3. flex + align-items

.parent {
    display: flex;
    align-items: center;
}
  • 优点:简单易用,只需设置父元素
  • 缺点:flex兼容问题和性能问题,可以小范围应用
0
0

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