前面的话

  相对于水平居中,人们对于垂直居中略显为难,大部分原因是vertical-align不能正确使用。实际上,实现垂直居中也是围绕几个思路展开的。本文将介绍关于垂直居中的5种思路

line-height

【思路一】: 行高line-height实现单行文本垂直居中

  行内流传着一种说法,单行文本垂直居中要将高度和行高设置成相同的值,但高度其实没必要设置。实际上,文本本身就在一行中居中显示。在不设置高度的情况下,行高撑开高度

<style>
.test{
line-height: 50px;
background-color: lightblue;
}
</style>
<div class="test">测试文字</div>

vertical-align

【思路二】:设置vertical-align:middle实现垂直居中

【1】设置父元素的display为table-cell

  通过为table-cell元素设置vertical-align:middle,可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的

  [注意]若要IE7-浏览器支持,则可以将其改为<table>表格结构

  [注意]设置为table-cell的div不能使用浮动绝对定位,因为浮动或绝对定位会使元素具有块级元素特性,从而丧失了table-cell元素具有的垂直对齐的功能。若需要浮动或绝对定位处理,则需要外面再套一层div

<style>
.parent{
display: table-cell;
vertical-align: middle;
}
</style>
<div class="parent" style="background-color: gray;height: 100px;">
<div class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</div>
</div>

【2】若子元素是图片,通过设置父元素的行高来代替高度,且设置父元素的font-size为0

  vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的,且各个字体的字符X的高低位置不一致。所以,当字体大小较大时,这种差异就更明显。当font-size为0时,相当于把字符X的字体大小设置为0,于是可以实现完全的垂直居中

<style>
.parent{
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style>
<div class="parent" style="background-color: lightgray;width:200px;">
<img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>

【3】通过新增元素来实现垂直居中的效果

  新增元素设置高度为父级高度,宽度为0,且同样设置垂直居中vertical-align:middle的inline-block元素。由于两个元素之间空白被解析,所以需要在父级设置font-size:0,在子级再将font-size设置为所需值;若结构要求不严格,则可以将两个元素一行显示,则不需要设置font-size:0

<style>
.parent{
height: 100px;
font-size: 0;
}
.child{
display: inline-block;
font-size: 20px;
vertical-align: middle;
}
.childSbling{
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
<div class="parent" style="background-color: lightgray; width:200px;">
<div class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</div>
<i class="childSbling"></i>
</div>

absolute

【思路三】:通过绝对定位实现垂直居中

【1】配合translate()位移函数

  translate函数的百分比是相对于自身高度的,所以top:50%配合translateY(-50%)可实现居中效果

  [注意]IE9-浏览器不支持

  [注意]若子元素的高度已知,translate()函数也可替换为margin-top: 负的高度值

<style>
.parent{
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="parent" style="background-color: lightgray; height:100px;">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>

【2】若子元素定高,结合绝对定位的盒模型属性,实现居中效果

<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
height: 50px;
}
</style>
<div class="parent" style="background-color: lightgray; height:100px;">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>

<关于增加div层级的说明>

  在水平居中对齐中,元素外层套一层div并设置absolute,元素设置负margin-left或者relative的负left属性,可以实现水平居中的效果。但由于margin是相对于包含块宽度的,这样margin-top:-50%得到的是宽度而不是高度的-50%,所以不可行;对于relative的百分比取值而言,在包含块高度为auto的情况下,chrome、safari和IE8+浏览器都不支持设置元素的百分比top值,所以也不可行

flex

【思路四】:使用弹性盒模型flex实现垂直居中

  [注意]IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
display: flex;
align-items: center;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
display: flex;
}
.child{
margin: auto 0;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>

grid

【思路五】: 使用栅格布局grid实现垂直居中

  [注意]IE10-浏览器不支持

【1】在网格容器上设置align-items或align-content

<style>
.parent{
display:grid;
align-items:center;
/*align-content:center;*/
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>

【2】在网格项目中设置align-self或者margin: auto 0

<style>
.parent{
display:grid;
}
.child{
align-self:center;
/*margin: auto 0;*/
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>

CSS实现垂直居中的5种思路的更多相关文章

  1. CSS实现垂直居中的4种思路

    × 目录 [1]line-height [2]vertical-align [3]absolute [4]flex 前面的话 相对于水平居中,人们对于垂直居中略显为难,大部分原因是vertical-a ...

  2. 顽石系列:CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  3. 有趣的css—隐藏元素的7种思路

    css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...

  4. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  5. CSS实现水平居中的4种思路

    × 目录 [1]text-align [2]margin [3]absolute [4]flex 前面的话 水平居中是经常遇到的问题.看似方法较多,条条大路通罗马.但系统梳理下,其实都围绕着几个思路展 ...

  6. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  7. CSS实现水平居中的5种思路

    前面的话 水平居中是经常遇到的问题.看似方法较多,条条大路通罗马.但系统梳理下,其实都围绕着几个思路展开.本文将介绍关于水平居中的5种思路 text-align [思路一]:在父元素中设置text-a ...

  8. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  9. CSS 实现垂直居中的几种方案

    最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了.本来想着每日一bo的,所以有的 ...

随机推荐

  1. PAT A1021 Deepest Root (25 分)——图的BFS,DFS

    A graph which is connected and acyclic can be considered a tree. The hight of the tree depends on th ...

  2. Hyper-V 安装系统

    注: 如屏幕前的您没有一定的网络知识(可能会使你的网络造成错乱),请勿按该文档操作. // 注:如果开启了Hyper-V,再使用VMware时在VMware上会报错,需把这里关闭后重启实体机后再开启V ...

  3. BSGS-Junior·大步小步算法

    本文原载于:http://www.orchidany.cf/2019/02/06/BSGS-junior/#more \(\rm{0x01}\) \(\mathcal{Preface}\) \(\rm ...

  4. BZOJ4816 SDOI2017 数字表格 莫比乌斯反演

    传送门 做莫比乌斯反演题显著提高了我的\(\LaTeX\)水平 推式子(默认\(N \leq M\),分数下取整,会省略大部分过程) \(\begin{align*} \prod\limits_{i= ...

  5. 重装系统之win10不能进入bios界面

    原因 自Win10发布以来,新出厂的预装Win10的电脑都默认在UEFI模式下启动操作系统.UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提 ...

  6. DataWorks使用小结(一)——概述

    一.概述 DataWorks数据工场,是MaxComputer的可视化开发平台,一站式开发.管理界面 1.功能概述 1.强大调度:支持分钟到月的调度 2.多种任务:支持ODPS.SHELL等多种任务 ...

  7. java.lang.IllegalStateException: Failed to load property source from location 'classpath:/application-dev.yml'

    如果你的项目没有配置错误,配置文件名称也正常,还出现这个问题,那一定是你的yml文件编码的问题 先附上一张项目架构图 当我启动服务器寻找配置文件的时候,服务器提示这样的错误信息 java.lang.I ...

  8. 11.11 开课二个月零七天(ajax和bootstrp做弹窗)

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. “论 ofo 是如何影响今日头条发展的”

    近段时间, ofo 小黄车押金难退的消息频频曝出.尽管 OFO 已经宣布押金只能在线上退还,但是线上退押金也难,因此很多的用户还是选择到 ofo 北京总部“要个说法”.记者昨天在现场发现,位于北京中关 ...

  10. QQ聊天记录备份助手 v1.0——搜索、备份、恢复QQ聊天记录文件,重装系统必备

    项目地址 https://github.com/guoyaohua/QQBackUp 开发环境 Netbean JAVA 功能描述 自动搜索硬盘中的QQ聊天记录文件 可选择的备份QQ数据记录 还原QQ ...