方法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. Python的替换函数——replace(),strip(),和re.sub()

    在Python中常用的三个"替换"函数是strip(),replace()和re.sub(),下面来讲讲这三个函数的用法. 一.replace() 基本用法:对象.replace( ...

  2. python 生成元组

    #create a tuple l = [(,), (,), (,)] print(list(zip(*l)))

  3. 【转】VMware网络连接模式—桥接、NAT以及仅主机模式的详细介绍和区别

    ☞ 本文主要介绍软件『VMware Workstation(虚拟机)』的相关内容:VMware网络连接模式—桥接.NAT以及仅主机模式的详细介绍和区别. 其下列版本/分支可以参考本文: 全部版本/分支 ...

  4. MongoDB (课时1,2)

    1.数据库之中支持的的SQL语句是由IBM开发出来的,使用并不麻烦,就是几个简单的单词:select, from, where,  group by, having, order by.目前最流行的数 ...

  5. Centos修改系统语言

    使用man page帮助时,发现居然是中文的,不过想想即便英语再水,也要逼着自己去适应.于是百度找了一下修改系统语言的方法. 首先使用 locale 命令查看当前的系统语言 然后修改时一般有两种方法, ...

  6. CentOS系统-常用组件安装

    1,安装系统后,补装包组yum groupinstall "Compatibility libraries" "Base" "Development ...

  7. [Java学习] Java异常处理基础

    Java异常是一个描述在代码段中发生的异常(也就是出错)情况的对象.当异常情况发生,一个代表该异常的对象被创建并且在导致该错误的方法中被抛出(throw).该方法可以选择自己处理异常或传递该异常.两种 ...

  8. English trip -- FC(万词辩音王)

    五个元音字母+一个半元音字母 1.发字母本身音都是 元+辅+e 2.不发字母音基本都是辅音结尾或者两个相同字母  辅+元+辅;元+辅 开音节                              ...

  9. codeforces 1042c// Array Product// Codeforces Round #510(Div. 2)

    题意:给出一个数组,2种操作:.1:x*y然后x消失,2:除掉x(2操作最多只能进行一次).问最大的结果的一种操作方式.逻辑题,看能不能想全面. 1先数好0,正,负的数量,zero,pos,neg.如 ...

  10. UVA-10689 Yet another Number Sequence (矩阵二分幂模板)

    题目大意:已知递推公式和边缘值,求某项的最后m(0<m<5)位数字. 题目分析:矩阵二分幂的模板题. 代码如下: # include<iostream> # include&l ...