在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置
text-align: center;
，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的
<td>
、
<th>
、
<caption>
等，而像
<div>
、
<span>
这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。因此我们需要通过别的方法去实现元素的垂直居中，下面我总结了几种了常用垂直居中方法。
单行文本垂直居中
对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：
<div id="div1">
这是单行文本垂直居中
</div>
/*css代码*/
#div1{
width: 300px;
height: 100px;
margin: 50px auto;
border: 1px solid red;
line-height: 100px; /*设置line-height与父级元素的height相等*/
text-align: center; /*设置文本水平居中*/
overflow: hidden; /*防止内容超出容器或者产生自动换行*/
该方法兼容IE7、IE6，但是只针对子div大小的固定的情况下才有效。大部分时候，子div的大小是不固定的，下面介绍子div大小不固定时的方法。由于显示效果与这个效果基本一样，效果图就不一一贴出来，读者可以自行复制代码验证。
2、利用translate
针对第一种方法中水平和垂直偏移父元素的50%后，不设置margin值，而是利用除css3中的transform属性设置translate的值，css代码部分改成如下：
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
这种方法需要注意transform是css3中的属性，使用时注意浏览器的兼容性，IE9之前的版本不支持。
3、利用绝对布局absolute
<div id="outer">
<div id="middle">
利用绝对定位实现子div大小不固定垂直居中
</div>
</div>
/*css代码*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
position: relative;
#middle{
background-color: #E41627;
width: 100px; //子div大小可随意设置
height: 100px;
margin: auto;
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
该方法不兼容IE7、IE6
4、利用vertical-align
<div id="outer">
<div id="middle">
利用vertical-align属性实现子div大小不固定垂直居中
</div>
</div>
/*css代码*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
display: table-cell;
vertical-align: middle;
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
margin: 0 auto;
这种方法是将div转变成table-cell显示，然后通过vertical-align: middle;再设置其子元素垂直居中，这种方法和上面设置父级元素高度固定时多行文本居中的方法一样，所以这种方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以参照上面的代码，上面设置父级元素高度固定时多行文本居中的方法其实就是将最里面的div垂直居中。这里我就不重述了。
5、利用display: flex
<div id="outer">
<div id="middle">
利用display: flex实现子div大小不固定垂直居中
</div>
</div>
/*css代码*/
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
display: flex;
justify-content: center;/*实现水平居中*/
align-items:center; /*实现垂直居中*/
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
这种方法只需要在父级div中加上这三句话就行，但是在IE中兼容性不好，IE9及以下IE浏览器版本都不支持。
以上是我总结的一些常用到的垂直居中的设计方法，大家可以根据自己的需要选择合适的设计方式。
文字容器高度固定，但容器内部文字个数不知，但要求文字部分垂直居中，利用css3的flex弹性盒子属性可以解决。核心代码：.align-center-vertical{display:flex;alig...
来自： 帆酱的博客
转自http://www.haorooms.com/post/css_div_juzhong前言我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如...
来自： 1966058819的博客
本篇是我整理的多行文本垂直居中的三种方法效果图如下图方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:...
来自： carpenterworm1874的博客
效果如图：&lt;!DOCTYPEhtml&gt;&lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt;&...
来自： 程序员养成计划
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align:center;，而对div等块级元素，只需要设置其left和righ...
来自： muzidigbig的博客
文字居中垂直居中（vertical-align）我们都知道有这么一个属性可以让图片，文本等在元素中垂直居中vertical-align:middle;vertical-align值有很多，常用的就是m...
来自： LH_ZSF
1)文本居中单行文本垂直居中：line-height，height设为一致即可.center1{width:400px;text-align:center;//水平居中height:40px;line...
来自： 2197
（1）垂直居中给文本标签的父级div加text-align:center;(2)水平居中*ul下li的下边框占据1px，导致input框内文字看着无法垂直居中，此时应调整input的padding上下...
来自： Queen-Shir的博客
水平居中：text-align:center垂直居中：只需让line—height的数值和容器或标签的高度相同即可：如：&lt;atitle="显示图片详情"style=&...
来自： Alan_Hou的博客
&lt;tdstyle="display:table-cell;vertical-align:middle"&gt;{$v.driver_uid|find_driv...
来自： 别在熬夜了！
我给div标签加了一个css想让div标签里的文字垂直居中对齐，该怎么做？&lt;divclass="1_div"&gt;知识天地&lt;/div&...
来自： weixin_38125277的博客
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align:center;，而对div等块级元素，只需要设置其left和righ...
来自： Tree hole
一：居中效果实现小结&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1，文本居中&nbsp;&...
来自： baidu_27686849的博客
前台页页显示的问题。 从数据库中读取了一段文本，要在页面上进行显示，要求居中显示，文本左对齐。 jsp: <table align="center" width="50%"> <tr> <td> <p
最近在做官网，其中有个小小的需求是一段多行文本在一个区域内垂直居中，就如下图所示： 需要将右面的文字垂直居中，通过网上查找资料显示可以使用display:table的方法来实现。 请看这篇博文...
来自： liuying1802028915的博客
\centerline语法：\centerline{文本}这是TeX的原始命令，适用于居中较短的文本。center环境语法：\begin{center}第一行\\第二行\\\end{center}ce...
来自： xiazdong
&amp;amp;amp;amp;lt;style&amp;amp;amp;amp;gt;body{margin:0pxauto;padding:0px;}header,section...
来自： qq_42408149的博客
关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：1、文本，图片等内联元素的水平居中。text-align:center2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：...
来自： DaiDaiiii的博客
大小不固定的图片、多行文字的水平垂直居中本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多...
来自： YUSIR 完美CODING世界
如题，不啰嗦。jsp页面部分代码： DIV文字 设置DIV样式:.font_div{ background-color:red; height:100px; width:60px; text-ali...
来自： 叫我吕小布
这几天遇到了好多关于字体垂直居中的问题，整理一下，希望对大家也有帮助。vertical-align：middlevertical-align用来指定行内元素（inline）和行内块级元素（inline...
来自： maomaolaoshi的博客
1、文本居中：text-align:center;line-height:100px;（=height）2、标签居中margin:0auto;其中0指的是margin-top:0代码片：搜索论坛...
来自： 只要你能豁出去，全世界都会为你让路！
场景一：父元素高度固定，如何使其中的文字垂直居中？代码：*{padding:0;margin:0;font-size:12px;}div{float:left;width:200px;height:2...
来自： coding...
单行文字可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3em;lin...
来自： xm1037782843的博客
有2种方法可以设置TextView文字居中：一：在xml文件设置：android:gravity="center"二：在程序中设置：m_TxtTitle.setGravity(Gravity.CENT...
来自： lanpy88的专栏
可以在你需要居中的td中添加classtext-center例如：```这里的内容在表格内居中了``` 或者在js中设置表格中所有内容居中，代码如下```$("td,th").addClass("te...
来自： win_turn的博客
这几天在工作中遇到了一个小问题：文本内容怎么能在div里水平垂直居中显示呢？同时群里的小伙伴恰巧也有提问这个问题的，所以我就总结了一下我知道的方法。一、利用行高(line-height)和vertic...
来自： 小灰辉的博客
网页css自适应高度下垂直居中文字1、关于css自适应高度下垂直居中文字，非定位类的方法实现:分析：使用vertical-align方法可以使元素垂直居中，但是只是针对支持vertical的元素，如t...
来自： myloveqiqi的博客
link：https://blog.csdn.net/u014607184/article/details/51820508在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简...
来自： sharpeha的博客
CSS3/CSS中居中解析今天，博主带来的是CSS3/CSS中的居中解析，相信小伙伴们有时候也会被各种居中搞的一脸懵逼把！居中总体来说可以分为水平居中还有垂直居中，顾名思义，定义这里就不解释了！首先，...
来自： qq_35788269的博客
不设置表格宽度，通过css设置单元格高度，如何控制单元格内文本垂直居中? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
div高度与行高一致（height:30px=line-height:30px）例：修改前#nava{font-size:20px;font-family:'微软雅黑';text-align:cent...
来自： 浮生途的博客
Div水平居中比较简单直接align:center;就行了,或者通过padding属性来控制也行。那么垂直居中呢？也许有人会说CSS中不是有vertical-align属性来设置垂直居中的吗？即...
来自： jianqi6的专栏
.search_inner_box_rightinput{height:40px;line-height:40px;border:2pxsolid#0080C8;width:428px;outline...
来自： lhrcylhr的博客
转自：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%E...
来自： wolinxuebin的专栏
做一个小项目，有这样一个需求，站点的标题栏显示标题的时候，想让标题在父布局中居中显示，就像如下在css3之前有这样一个属性可以控制文本的显示效果text-align:center但实际前框并不是想象的...
来自： 郑志雄
一行文字居中，两行或多行文字同样居中HTML&lt;divclass="book-detail-store-itemalign-center-vertical"&g...
来自： qq_42934839的博客
唉，好像挺老的问题，但是我怎么弄不到居中的。 我vertical-align试过了，用height 跟line-height相等我试过了，不行。 <table class="tbMain"> <tr>
1.从pyCharm提示下载PIL包nn http://www.pythonware.com/products/pil/nn nn2.解压后，进入到目录下nnncd /Users/jianan/Dow...
来自： 专注于cocos+unity+node.js全栈网游开发
由于FastDFS集群搭建非常复杂，对于初期学习FastDFS来说，搭建个单机版的作为入门更为实际一些。n第一步：搭建虚拟环境n FastDFS需要在Linux系统上安装，我们一般使用的...
来自： u012453843的专栏
jquery/js实现一个网页同时调用多个倒计时(最新的)nn最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦!nnnn//jsn...
来自： Websites
局部异常因子算法-Local Outlier Factor(LOF) 在数据挖掘方面，经常需要在做特征工程和模型训练之前对数据进行清洗，剔除无效数据和异常数据。异常检测也是数据挖掘的一个方向，用于反...
来自： wangyibo0201的博客
1. 前言rn隐马尔科夫HMM模型是一类重要的机器学习方法，其主要用于序列数据的分析，广泛应用于语音识别、文本翻译、序列预测、中文分词等多个领域。虽然近年来，由于RNN等深度学习方法的发展，HMM模型...
来自： tostq的专栏
扫二维码关注，获取更多技术分享nnn 本文承接之前发布的博客《 微信支付V3微信公众号支付PHP教程/thinkPHP5公众号支付》必须阅读上篇文章后才可以阅读这篇文章。由于最近一段时间工作比较忙，...
来自： Marswill
上一篇： nnidea创建springboot项目图文教程(配置文件)（五）nn nn http://blog.csdn.net/hcmony/article/details/7785499...
来自： hcmony的博客
最近比较有空，大四出来实习几个月了，作为实习狗的我，被叫去研究Docker了，汗汗！nnDocker的三大核心概念：镜像、容器、仓库n镜像：类似虚拟机的镜像、用俗话说就是安装文件。n容器：类似一个轻量...
来自： 我走小路的博客
webService学习（二）—— 调用自定义对象参数rn本文主要内容：rn1、如何通过idea进行webService Client的简单实现（不再使用wsimport的方式，其实是ide帮我们做了...
来自： 止水的专栏
链表是数据结构中最基本常用的，C++语言中单链表是利用指针操作实现的，python作为面向对象编程的，可以使用创建一个Node类来实现链表，利用类的属性引用来代替指针操作。n 下面我们创建了一个...
来自： 令狐公子的博客
前言本文是对之前的一篇文章Spring+SpringMVC+mybatis+Quartz整合代码部分做的一个修改和补充， 其中最大的变化就是后台框架变成了Spring Boot。本工程所用到的技术或工...
来自： 天降风云的博客
