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

　　在CSS中实现水平居中是非常简单的，行内元素设置其父元素的text-align:center，块级元素就对其自身应用magrin:auto。然而，实现垂直居中就有点麻烦了，首先它是极其常见的需求，看似简单，在实践中，往往难如登天，当设计尺寸不固定时尤其如此。以下是我找到的一些方法：

方法一：行高line-height

（1）单行文本居中

HTML代码(无特别标明，后面所有方法的HTML代码均为这个)

 <div class="box1">
 <div class="box2">垂直居中</div>
 </div>

CSS代码

 .box1{
   height: 100px;
3 }
 .box2{
  line-height: 100px;
 }

（2）图片垂直居中

HTML代码

 <div class="box1">
   <img src="data:images/bg-sun.png" alt="">
 </div>

CSS代码

 .box1{
   line-height:200px;
 }
 .box1 img{
   vertical-align: middle;
 }

方法二：table-cell

CSS代码

 .box1{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }

方法三：display:flex

（1）CSS代码

 .box1{
   display: flex;
 }
 .box2{
   margin:auto;
 }

（2）CSS代码

 .box1{
   display: flex;
   justify-content:center;
   align-items:center;
 }

方法四：绝对定位和负边距

（1）CSS代码

 .box1{
   position: relative;
 }
   .box2{
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -10px;/*减去子元素高度一半*/
   margin-left:-32px;/*减去子元素宽度一半*/
 }

（2）CSS代码

 .box2{
   position: absolute;
   top:calc(50% - 10px);/*减去子元素高度一半*/
   left:calc(50% - 32px);/*减去子元素宽度一半*/
 }

方法五：绝对定位和0

HTML代码

 <div class="box1">
   <div class="box2"></div>
 </div>
 </body>

CSS代码

 .box2{
   width: 50%;
   height: 50%;
   background: #555;
   overflow: auto;
   margin: auto;
   position: absolute;
 ;;;;
     }

方法六：translate

（1）CSS代码

 .box2{
   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
 }

（2）HTML代码

 <body>
 <div class="box1">
 </div>
 </body>

CSS代码

 .box1{
   width: 200px;
   height: 200px;
   background: #666;
   margin: 50vh auto 0;
   transform: translateY(-50%);
 }

方法七：display:-webkit-box

HTML代码

 <body>
 <div class="box1">垂直居中</div>
 </body>

CSS代码

 .box1{
   display: -webkit-box;
   -webkit-box-pack:center;
   -webkit-box-align:center;
   -webkit-box-orient: vertical;
   text-align: center
 }

纯CSS实现垂直居中的7种方法的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

  7. 纯CSS3实现垂直居中的九种方法

    浏览时看到的资料,每个都做了测试,很好,就先收了~ 测试的是谷歌浏览器,没有任何问题,用360,IE11,火狐,搜狗浏览器做测试时,第五个方法在360,搜狗,和IE11有点问题,第七个在IE11有问题 ...

  8. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  9. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

随机推荐

  1. 利用MUI滑动进行利息计算（移动端APP显示）

    在开发移动端的应用时,会用到很多的手势操作,比如滑动.长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,其中滑动应用是比较常见的应用操作,本篇文章将讲述如何利用滑动改变对应值进行计算 ...

  2. Eclipse 快捷键和模板设置

    快捷键设置 菜单  Window --> Preferences---General---Keys Content Assist:  代码提示快捷键 模板设置 新建一个模板 在Insert Va ...

  3. 快学Scala之继承

        ## 1. 继承 Scala语言通过 extends 关键字来继承类. 那么继承一个类有什么好处呢? 子类除了拥有继承自超类的方法和字段(即为val(常量), var(变量)所定义的), 还可 ...

  4. 在Linux环境如何在不解压情况下搜索多个zip包中匹配的字符串内容

    今天有个生产文件需要查日志,但因为是比较久远的故障,日志已经被归档为zip包放到某个目录下了,在不知道具体日期时间的情况下,总不能一个一个解压搜索吧.于是就研究一下怎么在多个压缩包里搜索字符串了.目前 ...

  5. java 文件的编码 问题

    package com.io; public class Encodedemo { public static void main(String[] args)throws Exception{ // ...

  6. WPF WebBrowser Memory Leak 问题及临时解决方法

    首先介绍一下内存泄漏(Memory Leak)的概念,内存泄露是指程序中已动态分配的堆内存由于某种原因未释放或者无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果. 最近在使用W ...

  7. CentOS 6.9上安装mysql-5.6.36

    CentOS 6.9上安装mysql-5.6.36 1.准备数据存放的文件系统 新建一个逻辑卷,并将其挂载至特定目录即可.这里不再给出过程. 这里假设其逻辑卷的挂载目录为/data,而后需要创建/da ...

  8. 网络爬虫——针对任意主题批量爬取PDF

    |本文为博主原创,转载请说明出处 任务需求:要求通过Google针对任意关键字爬取大量PDF文档,如K-means,KNN,SVM等. 环境:Anaconda3--Windows7-64位--Pyth ...

  9. JavaScript用typeof判断变量是数组还是对象，都返回object

    在JavaScript中所有数据类型严格意义上都是对象,但实际使用中我们还是有类型之分,如果要判断一个变量是数组还是对象使用typeof搞不定,因为它全都返回object. 使用typeof加leng ...

  10. sed的粉丝

    UNIX/LINUX下有个工具叫sed,起源于ed命令,但没有人机交互,完全是脚本语言.sed虽然是结构化的程序,但其虚拟出来的机器与我们实际机器相差甚远,依靠模式空间和保留空间的交替使用.正则表达式 ...