垂直居中分两种情况：1.父元素高度确定的单行文本        2.以及父元素高度确定的多行文本。

　　1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height高度一致来实现的，即此时单行文本的行高line-height=height(父元素块高度)。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

但是有一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块：

#sy{

    margin-top:20px;

    text-align:center;

    height:50px;

    line-height:50px;

    width:200px;

    font-size:20px;

    background:#F30;}

<div id="sy">你看我是不是超出了父块元素？</div>

所以这种方法用于网页的页眉或者页脚还是很不错的

　　2.垂直居中-父元素高度确定的多行文本

　　　　方法一：使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

　　　　　　　　css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

　　　　　　　　（td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。）

.jz{

       height:200px;
　　　　background:yellow;

    }

<table><tbody><tr><td class="jz">

<div>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

　　　　方法2：通过设置父元素块为：display:table; 子元素为：display:table-cell;vertacal:middle;来让多行文本达到垂直居中效果（类似方法1）

　　　　　　　　table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

　　　　　　　　table-cell ： 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

例子1：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多行水平垂直居中</title>

    <style type="text/css">

        .no1{

            display: table;

            height: 300px;

            border: 2px solid blue;

            text-align: center;

        }

        .no2{

            display: table-cell;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div class="no1">

        <div class="no2">

            <p>搞事情搞事情搞事情</p>

            <p>要打架是不是？</p>

            <p>一百块都不给我！</p>

        </div>

    </div>

</body>

</html>

例子2：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多行垂直水平居中2</title>

    <style type="text/css">

        #no1{

            display: table;

            height: 300px;

            border:  2px solid black;

            text-align: center;

        }

        #no1 p{

            font-size: 20px;

            display: table-cell;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div id="no1">

        <p>

            搞事情搞事情搞事情<br>打架是不是？<br>一百块都不给我！

        </p>

    </div>

</body>

</html>

　　两个例子有不同，剩下的思考思考，动动脑子，总不会有坏处,思考留评论让我看看你们的想法哇

 

垂直居中小记 line-height table vertical-align：middle的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  3. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  6. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  7. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  8. css 居中，中央

    在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...

  9. 微信小程序中如何实现分页下拉加载？（附源码）

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

随机推荐

  1. 如何使用MVP+Dagger2+RxJava+Retrofit开发(1)

    概述 在2016年5,6月份开始在知乎上看到开发方法,那时候记得是看mvc,mvp,mvvm这三种开发模式区别,后面进一步了解到google在github上开源了使用这3种模式进行Android开发的 ...

  2. Head First 设计模式 第6章 命令模式

    第6章 命令模式 在本章,我们将把封装带到一个全新的境界,把方法调用封装起来.没错,通过方法调用,我们可以把运算块包装成型.所以,调用此运算的对象不需要关心运算是如何进行的,只要知道如何使用包装成型的 ...

  3. css2--垂直对齐

    ## CSS2 vertical-align 垂直对齐     - baseline   默认值.基于基线对齐     - middle     位于同一行的非衬线字体小写字母的 1/2 处.不要为父 ...

  4. MongoDB安全策略

    一,修改启动端口 mongo的默认端口为27017 如果启用的是27017端口并且在公网上很容易被人攻击,所以第一点我们要修改端口 sudo ./mongod --dbpath=/data/db -- ...

  5. Oracle Test 日志

    这是一个在本地写日志的软件,写一篇看看效果怎么样. 我主要想看看这个行间距ok不... 看看效果...

  6. 整理pandas操作

    本文原创,转载请标识出处: http://www.cnblogs.com/xiaoxuebiye/p/7223774.html 导入数据: pd.read_csv(filename):从CSV文件导入 ...

  7. C/C++ 知识点---字符串函数

    1.strcpy字符串拷贝2.strcmp字符串比较3.strstr字符串查找4.strDelChar字符串删除字符5.strrev字符串反序6.memmove拷贝内存块7.strlen字符串长度 - ...

  8. SDWebImage4.0.0 源码解析

    在开发iOS的客户端应用时,经常需要从服务器下载图片,虽然系统提供了下载工具:NSData.NSURLSession等等方法,但是考虑到图片下载过程中,需要考虑的因素比较多,比如:异步下载.图片缓存. ...

  9. 【物联网云端对接-4】通过MQTT协议与百度云进行云端通信

    百度云的天工物联网服务目前包括:物接入.物解析.物管理.时序数据库和规则引擎等5大部分,本篇文章仅介绍物接入. 天工物联网的物接入,从开发者的角度来说相对有些复杂,需要多步操作才能实现一个云设备的创建 ...

  10. 张高兴的 Xamarin.Forms 开发笔记：为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

    所谓 UWP 样式的汉堡菜单,我曾在"张高兴的 UWP 开发笔记:汉堡菜单进阶"里说过,也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon,并且左侧使用填充颜色 ...