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设置标签的水平与垂直居中,定位与弹性盒布局的的结合

在一般情况下利用css在对标签进行水平与垂直居中的时候利用弹性盒布局可以轻易解决,只需设置父级标签的主轴与交叉轴居中即可,代码如下: ...
  • WULIhuihui
  • WULIhuihui
  • 2016年09月24日 22:29
  • 5968

css布局之水平垂直居中

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

CSS布局——水平垂直居中

题外话:这是一个让人抓狂的问题。HTML文档结构如下: 实现效果:1.(子元素已知宽高)给父容器设置绝对定位(absolute),子元素设置为相对定位(relative),top、left设...
  • u012194956
  • u012194956
  • 2018年01月17日 22:06
  • 136

CSS布局之水平垂直居中

http://www.w3ci.com/front/xHTMLCSS/739.html 未完待续
  • qq_24092035
  • qq_24092035
  • 2015年08月19日 14:33
  • 138

CSS布局之-水平垂直居中

CSS布局之-水平垂直居中
  • wwq518
  • wwq518
  • 2016年11月27日 12:24
  • 187

CSS布局——简洁、兼容性强的垂直水平居中方案

1、absolute,需要知道居中元素的宽与高 charset="utf-8" /> type="text/css"> ...
  • tangxiaolang101
  • tangxiaolang101
  • 2016年06月24日 11:04
  • 628

css水平垂直居中布局

转载自:https://zhuanlan.zhihu.com/p/25068655 水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform  .parent { ...
  • mozuncangtianbaxue
  • mozuncangtianbaxue
  • 2017年10月13日 16:48
  • 148

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

关于html元素或文字水平+垂直居中的方法总结
  • sinat_22599079
  • sinat_22599079
  • 2015年04月04日 16:16
  • 714

CSS3 Flex实现元素的水平居中和垂直居中

网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技...
  • qianqianstd
  • qianqianstd
  • 2017年03月06日 23:07
  • 25247

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...
  • freshlover
  • freshlover
  • 2013年09月11日 21:06
  • 327058
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS水平垂直居中布局
举报原因:
原因补充:

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