CSS垂直居中布局解决方案

原创 2016年08月28日 14:15:24

垂直居中布局解决方案

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兼容问题和性能问题,可以小范围应用
版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS实现三栏布局和垂直居中

网上找的方法,自己整理一下~(这些面试也会考) #三栏 绝对布局 我是左边 我是右边 我是中间 html,body{ margin: 0px; width: 100%; } ...
  • liuzijiang1123
  • liuzijiang1123
  • 2017年06月01日 10:37
  • 371

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

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

css设置标签的水平与垂直居中,定位与弹性盒布局的的结合

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

CSS垂直水平居中,display:flex,布局,文字属性的一些零碎

body的height不可少,如body{height:100%},否则子元素会不认,如果子元素的高直接以百分比写的话,会不显示。因为识别不出来。 宽度则不会,因为浏览器的宽度是固定的,高度会滚,...
  • github_36487770
  • github_36487770
  • 2017年05月10日 11:36
  • 3578

css---flex布局中,如何响应式 得水平垂直居中?flex子元素左右 上下居中

div{ display: flex; justify-content:center;/*x轴对...
  • Wbiokr
  • Wbiokr
  • 2017年09月02日 10:34
  • 376

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

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

纯CSS完美实现垂直水平居中的6种方式

本文由 起步科技 原创。未经许可,禁止转载! 作者:起步科技前端研究员小茄,专注分享HTML5 App快速开发工具 WeX5 的黑魔法以及各种有趣炫酷的前端技术。 前言由于HTML语言的定位问题...
  • justeptech
  • justeptech
  • 2016年07月13日 12:01
  • 10385

WEBKIT BOX 实现水平垂直居中

display: -webkit-box;  使用flexbox 布局   -webkit-box-pack: center;  实现容器内容垂直居中   -webkit-box-align:...
  • ISaiSai
  • ISaiSai
  • 2015年11月22日 16:19
  • 6229

CSS 最新的垂直居中的8个方法

CSS 垂直居中的8个方法 前两天看到一个帖子,是几年前的帖子了,总结利用 CSS 来实现对象的垂直居中有6个方法,结合现在流行的一些方法,我总结出一共有8种CSS垂直居中的方法,大家按实际需要使用对...
  • sinat_15951543
  • sinat_15951543
  • 2016年06月20日 13:49
  • 1626

css布局-多行文字垂直居中

场景一:父元素 高度固定,如何使其中的文字垂直居中? 代码: *{padding: 0;margin:0;font-size: 12px;} div{flo...
  • hdchangchang
  • hdchangchang
  • 2015年07月28日 16:59
  • 12828
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS垂直居中布局解决方案
举报原因:
原因补充:

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