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

方法一:Vertical-Align法

  我们使用 vertical-align:middle 来实现元素垂直居中

  

  CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式

  我们可以把div 的显示方式设置为表格,从而使用表格的 vertical-align middle 属性

    <style>
#wrapper{
width: 200px;
height: 200px;
background-color: aqua;
display: table;
}
#content{
display: table-cell;
vertical-align: middle;
}
</style> <div id="wrapper">
<div id="content">
Content is Here!
</div>
</div>

分析

示例

  

优点

  • content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时, content 不会被截断

缺点

  • Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签(其实没那么糟糕,另一个专题)

方法二:绝对定位+负边距法

  这个方法使用绝对定位的 div,把它的 top 设置为 50%margin-top 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。因为有固定高度,也许你得给 content 指定 overflow:auto,这样如果 content 太多的话,就会出现滚动条,以免content 溢出。

<div class="content"> Content goes here</div>  

#content {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px; /* negative half of the height */
}

分析

优点

  • 适用于所有浏览器
  • 不需要嵌套标签

缺点

  • 没有足够空间时,content 会消失(类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况)

方法三:浮动元素法

  这个方法的原理是利用一个空的浮动元素来控制主要内容在容器中的位置

  

  比如我们的目标是让红色DIV位于绿色父级元素的中间,我们要让一个浮动元素占据黄色的位置,然后红色元素清除浮动,自然而然到达居中位置。

        #parent {
padding: 5% 0;
background-color: green;
} #floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
background: yellow;
} #child {
clear: both;
height: 100px;
background: red;
} <div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>

方法四:FLEX定位法

  CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间

  效果是这样的:

  

        #wrapper{
display: flex;
height: 100px;
background: green;
}
#content{
margin: auto;
background-color: red;
} <div id="wrapper">
<div id="content">
Content is Here!
</div>
</div>

 还有一种垂直居中的实现方式 ,针对移动端页面布局的,很好用

#parent{
  display:flex ;
  align-items:center; 垂直居中
  justify-content:center ; //水平居中
}

方法五:Line-Height方法

  这个方法适用于单行文字的垂直居中,只需要将包含文字元素的容器行高设置为大于字体大小并且等于元素的高度。默认情况下,文字上下部分会留有相同的空间,因而实现了文字的垂直居中。

<div id="parent">
<div id="child">Text here</div>
</div> #child {
line-height: 200px;
}

  这种方法只适用于单行文字的垂直居中,如果需要多行文字居中,需要选择其他方法

参考资料

行内元素的记录规则

  字体大小要加粗,组合图像输入框,锚准斜体的菜单,强调换行上下标。

  • 行内元素:https://blog.csdn.net/bwf_erg/article/details/69844527
  • MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
  • 六种方法:https://www.jianshu.com/p/086364d3d5e2
  • 五种方法:https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/

顽石系列:CSS实现垂直居中的五种方法的更多相关文章

  1. css 水平居中垂直居中的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

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

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

  4. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  5. [转]-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 ...

  6. 提高CSS文件可维护性的五种方法

    当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...

  7. CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...

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

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

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

    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...

随机推荐

  1. 83. Remove Duplicates from Sorted List【easy】

    83. Remove Duplicates from Sorted List[easy] Given a sorted linked list, delete all duplicates such ...

  2. java-FileDemo

    关于file类的使用:文件的增删查 package com.example; import java.io.File; import java.io.IOException; public class ...

  3. Python调用zabbix API批量添加主机 (读取Excel)

    本文转载自:http://blog.mreald.com/178 Zabbix可以通过自发现添加主机,不过有时候不准确,通过API添加会更加准确! 脚本使用的跟zabbix相关的内容.参考的是zabb ...

  4. FreeBSD将SHELL从csh换成bash并支持中文显示

    刚准备在FreeBSD下学习Shell,结果发现怎么好多命令都没有,比如declare.后来发现连bash都没有,好像bash用的多一些吧,于是就准备将csh换成bash. 由于没有bash,所以先得 ...

  5. openWRT自学---初始化过程和主要脚本的分析

    参考文档: http://wiki.openwrt.org/doc/techref/process.boot http://blog.csdn.net/jk110333/article/details ...

  6. python第三周文件处理和函数-----下

    #默认参数的值是在一开始定义的时候就传给了函数, # 在后来的修改中不会被修改. #默认参数的值必须放到位置形参参数的最后面 #默认参数使用的场景是一个参数不经常变得场景,所以参数一般是不可变类型.字 ...

  7. PHP中插件机制的一种实现方案

    这篇文章的出发点是我对插件机制的理解,及其在PHP中的实现.此方案仅是插件机制在PHP中的实现方案之一,写下来和大家分享,欢迎大家一起讨论. 插件,亦即Plug-in,是指一类特定的功能模块(通常由第 ...

  8. C#二进制序列化和反序列化

    public class WRSerializable { public static void SerializeToFile<T>(T _description, string _fi ...

  9. Laravel 5.1 Blade模板引擎

    为什么要使用blade 它是干什么用的? blade模板引擎使我们写HTML页面的地方,使用它是因为它能给我们提供很多的遍历,减少代码的重复率 提高开发效率.我们写blade的路径是 resource ...

  10. Linux之(Git)服务之windows配置

    设置你自己的昵称与email设置本地机器默认commit的昵称与Email. 请使用有意义的名字与email. git config --global user.name "syavingc ...