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常用布局之——水平垂直居中解决方案

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

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

1、absolute,需要知道居中元素的宽与高 charset="utf-8" /> type="text/css"> ...

JS等比例缩放图片并构建图片水平垂直居中解决方案

有的时候需要展示图片的时候需要展示好看一些,就像WINDOWS文件夹图片缩略展示,图片可以等比例缩放又可以水平垂直方向都居中,这样多好?可惜网上这样的解决方案并不多,下面给出具体解决方案,希望能帮助到...
  • qczxl
  • qczxl
  • 2015年11月25日 13:51
  • 1012

div中 文字垂直居中的解决方案

两种方法   1.  显示  //不需要vertical-align:center;因为没用,重点是上绿色部分,当文字多余一行是不行,采用第二种   2.用padding,填充   ...

水平居中布局解决方案

以下方案都是解决父元素、子元素宽度都未定时的水平居中布局 1. inline-block + text-alignHTML部分: ----------------------------...
  • dhassa
  • dhassa
  • 2017年06月03日 10:05
  • 420

css中元素居中显示的常见问题及解决方案

居中显示     margin: 0px auto;可以使元素(自己及子元素)居中显示,使用时必须有width值,否则无效果。          如果要让被包裹在内部的元素居中对齐则使用text-al...

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

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

CSS垂直居中网页布局实现的5种方法

CSS 垂直居中 vertical-align

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

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

收罗CSS布局中有关水平和垂直居中的N种方法

先来说说水平居中。  CSS水平居中的方法:  1、最常见的margin方法:  给元素设置一个显示式的宽度,然后加上margin的左右值为auto,示例:  复制代码...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS垂直居中布局解决方案
举报原因:
原因补充:

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