CSS水平垂直居中布局

原创 2016年08月28日 14:45:00

水平垂直居中布局

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]原本具有的兼容性优势就体现不出来了,显得不伦不类。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

元素布局——CSS水平垂直居中

关于html元素或文字水平+垂直居中的方法总结

解读 CSS 布局之水平垂直居中

摘要: flexbox是个很强大的布局模块,三个属性就搞定居中,而且不论父容器还是居中元素都可以不定宽高 水平居中 align="center" 直接在标签对象内加align="...

CSS常用布局之——水平垂直居中解决方案

纵观css盒子(标准or非标准)常用的布局中,我大致分为2类,一种是居中,一种是等分。居中包含了水平居中,垂直居中,水平垂直居中;等分又包含了等分块布局,等分高布局。 水平居中先看看水平居中的布局方案...

解读 CSS 布局之水平垂直居中

对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法。由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方...

图片水平垂直居中css

  • 2010年05月20日 15:19
  • 44KB
  • 下载

水平垂直居中方案与flexbox布局

水平垂直居中方案与flexbox布局

CSS实战技巧:图片(大小不固定)的水平垂直居中

1.display:inline-block和文字大小控制居中如果图片和文本处于一行时,可采用这种方法。 html代码 关注我们: css代码.box { ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS水平垂直居中布局
举报原因:
原因补充:

(最多只允许输入30个字)