方法1、这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align 属性。

#wrapper {   //代表父元素
display: table;
} #cell { //代表子元素,里面可放内容
display: table-cell;
vertical-align: middle;
}

方法2、使用绝对定位的 div,transform: translate(-50%, -50%)

.wrapper1{   //父元素  相对定位
position: relative;
height: 240px;
width:100px;
}
.content {  //子元素 绝对定位
position: absolute;
top:50%;
left:50%;
margin: auto;
-webkit-transform: translate(-50%,-50%);
}

css实现垂直居中的几种方法的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. illumina support

    http://support.illumina.com/help/BaseSpace_App_WGS_BWA_help/Content/Vault/Informatics/Sequencing_Ana ...

  2. Apache的安装与卸载

    安装 1.下载压缩包并解压到D盘根目录(目录自定义) 2.用记事本打开D:\Apache\conf\httpd.conf,找到Define SRVROOT 把值改为上一步的路径,如Define SRV ...

  3. WPF基础学习笔记整理 (一)

    基础知识: WPF:Windows Presentation Foundation,用于Windows的现代图形显示系统: WPF用于编写应用程序的表示层: 引入“内置硬件加速”和“分辨率无关”: S ...

  4. windows 命令行中使用winrar

    加入环境变量即可 我的电脑右键属性->高级->环境变量->系统变量->编辑 变量名:path 变量值:C:/Program Files/WinRAR; --变量值为WinRAR ...

  5. ZZZ_整理的结构

    A.头尾 添加/移除 B.随机存取 C.数据存取 1.构造函数 2.赋值 3.迭代器操作 4.插入 5.删除 6.交换 7.大小 8.查找

  6. Java入门:零碎的知识点

    实例变量经常被称为属性 成员变量和局部变量:前者在类中定义,后者在类的方法中定义且系统不会自动赋初始值 我们创建一个对象的时候实际上执行的是无参的构造方法 静态变量 static String arr ...

  7. 《剑指offer》第七题(重要!重建二叉树)

    文件一:main.cpp // 面试题:重建二叉树 // 题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输 // 入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历 ...

  8. Spring源码的编译、下载和阅读

    原文出处: 分享牛 想对spring框架进行深入的学习一下,看看源代码,提升和沉淀下自己,工欲善其事必先利其器,还是先搭建环境吧. 环境搭建 sping源码之前是svn管理,现在已经迁移到了githu ...

  9. DataGridView1

    for (int i = 0; i < DataGridView1.SelectedRows.Count; i++)    { //第i行第一列 String ai1= DataGridView ...

  10. git查看本地分支关联(跟踪)的远程分支之间的对应关系,本地分支对应哪个远程分支

    git branch -vv: [root@realserver git-test]# git branch -vv  bug    23043a7 add new.txt master.* dev  ...