前言：水平居中，我们可以很容易想到使用text-align实现文字水平居中，使用margin:0px auto;可以实现元素水平居中；所以重点将是怎么实现文字和元素的垂直居中？？

--- 本文将通过举栗子说明各种解决方式：

首先，单行文字、多行文字怎么水平垂直居中？？

① 方案一：文本水平居中使用text-align:center即可，height设置和line-height一致可以实现单行文本垂直居中；如下

   .class1 {height:50px;width:500px;text-align: center;background-color:lightblue;line-height:50px;overflow: hidden;  }
   <div class="class1">测试单行文字水平垂直居中</div>

②方案二：具体到像素，单行或多行文字垂直居中还可以通过上下padding相等来实现，如下

   .class2 {font-size:20px;color:red;padding:20px 0px;border:1px solid red;text-align:center; }
   <p class="class2">这是段落内容，可以通过上下padding实现文字垂直居中</p>

③方案三：使用flex布局的justify-content: center;align-items: center;以及text-align:center;来单行或多行文字水平垂直居中实现，如下

   .class3 {height:90px;color:blue;border:1px solid red;display:flex;justify-content: center;align-items: center;text-align:center;}
<p class="class3">这是段落内容，可以通过上下display:flex和text-align：center实现文字水平垂直居中，可以通过上下display:flex和text-align：center实现文字水平垂直居中，</p>

④方案四：display: table-cell;vertical-align: middle;实现单行或多行文字垂直居中，如下

   .class4 {height:90px;width:500px;text-align: center;background-color:orange;display: table-cell;vertical-align: middle;}

注意：vertical-align:center只对行内元素有效，加上display：table-cell可以实现垂直居中的效果；但是table布局不推荐使用，因为会影响网页性能；

元素水平垂直居中：

①方案一：已知子元素宽高，比如宽高都是200px; 使用absoluted定位和负margin值是宽高的一半来实现水平垂直居中，如下

   .outBox {position: relative;width:600px;height:300px;border:1px solid purple;}.innerBox {width:200px;height:200px;background-color:lightblue;position: absolute;top:50%;left: 50%;margin-top:-100px;margin-left: -100px;}
   <div class="outBox"><div class="innerBox">这是元素内容块，使用绝对定位结合负margin来实现垂直水平居中</div></div>

说明：项目中经常使用，兼容性较好

②方案二：已知元素宽高。在绝对定位下，top、right、bottom、left均为0的情况下会自动填充父元素的可用空间，再使用margin：auto会平均分配空间；如下

.outBox {position: relative;border:1px solid red;height:250px;width:650px;
}
.innerBox {width:300px;height:100px;position: absolute;top:0;bottom: 0;left:0;right:0;background-color: lightblue;margin:auto;
}
<div class="outBox"><div class="innerBox">这是需要水平居中的元素，使用的是绝对定位top、bottom、left、right均为0</div>
</div>

③方案三：元素未知或已知宽高。利用css3的transform实现垂直水平居中

outBox {position: relative;border:1px solid red;height:250px;width:650px;
}
.innerBox {border:1px solid blue; position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
}

说明：此方法和flex布局只支持IE9＋以上的浏览器。

④元素未知或已知宽高。利用flex弹性布局实现（flex布局后续会详解）

.outBox {border:1px solid red;height:250px;width:650px;display: flex;justify-content: center;align-items: center;
}
.innerBox {border:1px solid blue;
}

其它常用的布局常遇到的问题demo

Demo1: 如何解决单行图片和文字水平居中排列的问题？？

<div><img src="http://www.w3school.com.cn/i/eg_bookasp.gif" style="width:50px;height:50px;vertical-align: middle;">测试用的文字
</div>

说明：只需要在img标签加上vertical-align:middle; 样式就可以实现单行图片文字垂直居中；

效果：

Demo2：为什么在使用dispaly:inline-block; 的元素上使用vertical-align：middle;无效？？

<div style="border:1px solid red ;width:220px;height:50px;display: inline-block;vertical-align: middle;text-align: center;">需要垂直居中显示的文字
</div>
<span>nihao</span>

说明：vertical-align:middle;只对行内元素有效。 使用了dispaly:inline-block;的元素可以理解为是可在一行内排列的块级元素，可以设置宽高；解决办法：使用display:cell-table;vertical-align：middle; 或使用line-height；或使用flex布局居中；

效果：

CSS文字或元素的水平垂直居中多种方式（简单明了）相关推荐

  1. HTML+CSS之设置元素的水平垂直居中

    本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中. 1.弹性布局(不换行) justify-content:center:水平居中 align-items:center:垂直居中 .fath ...

  2. CSS实现子元素div水平垂直居中

    div基本布局 <div class="main"><div class="center"></div>

  3. css实现文字或者div盒子水平垂直居中的方法

    实现水平垂直居中的方法 文本(文字)内容属于行内元素 行内元素水平垂直居中方法 方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...

  4. css 水平垂直居中实现方式

    css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 <div ...

  5. 未知宽高元素的水平垂直居中

    大致有4种方法实现:         一.table布局(display:table)         二.绝对布局(position:absolute)+translate         三.转化 ...

  6. CSS实现水平垂直居中的方式有哪些？

    目录 CSS实现水平垂直居中的方式有哪些? 1.利用flex布局 2.利用flex+margin 3.利用定位,子绝父相 3.1.利用margin: auto(偏移量都为0) 3.2.利用平移tran ...

  7. 文字在div内水平垂直居中

    2019独角兽企业重金招聘Python工程师标准>>> 在开发中,很多时候都需要将文字在div内水平垂直居中,最常见的如登录按钮.下面仅记录我的方法,我的工作领域是移动Web开发,所 ...

  8. CSS实现文字和图片的水平垂直居中

    一.文本的水平垂直居中: 1.水平居中: 是不是很开心?超级简单的问题,一个text-align:center 就搞定了.过过过- ---------------------------------- ...

  9. html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）

    1.css实现居中 缺点:需要提前知道元素的宽度和高度. Document .box{ width: 600px; height: 400px; position: absolute; left: 5 ...

最新文章

  1. ftl数据类型转换以及list遍历的使用
  2. mysql like ilike_MySQLilike 子句
  3. 高质量c/c++编程(9)
  4. Cisco无线mDNS
  5. Android学习笔记05---项目的目录结构与安装及启动过程分析
  6. 速成pytorch学习——2天
  7. vb中findwindow的疑惑
  8. bios uefi legacy_安装win10用uefi还是legacy？win10 uefi引导修复教程
  9. hibernate第一天
  10. 从头学习爬虫（十六）进阶篇----第三方接口
  11. 网站443端口经常受到攻击怎么办
  12. 统计数字问题Python
  13. 电脑用户名被删除了 登录不了，进不了界面怎么办。
  14. 正则匹配所有的a标签
  15. axure 设置背景虚化_axure 设置背景虚化_「PPT素材」 77幅各种墙面砖墙纹理背景...
  16. SAR 三点回波模拟 正侧视RD算法（经典好用）
  17. Radare2 学习笔记：从入门到精通 1. Radare2 简介，及安装
  18. 如何区分单模和多模光纤收发器
  19. smpl-x论文学习-部分翻译
  20. Windows.h 常用API函数【转】

热门文章

  1. wordpress支持MySQL5.5_wordpress数据库版本为5.5以上导出不能在5.5以下的版本导入的问题解决...
  2. 图形学 射线相交算法_计算机图形学中的阴极射线管（CRT）
  3. Java PipedInputStream receive（）方法与示例
  4. java list过滤重复的数据_List 去除重复数据的 5 种正确姿势！
  5. 如何卸载非linux系统分区,如何卸载Linux系统分区？卸载Linux系统分区的方法-站长资讯中心...
  6. java printwriter实例_PrintWriter做过滤流+FileWriter案例分析
  7. 实验一 线性表的顺序存储与实现_数据结构篇之单链表的创建以及实现
  8. python字符串转义序列_Python | 忽略字符串中的转义序列
  9. TomCat JDK环境变量
  10. Python禁止最大化按钮和禁止拉伸窗口大小