方法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. jenkins 插件,下载地址

    http://updates.jenkins-ci.org/download/plugins/ 通常我们需要下载的插件有如下几个:

  2. django QueryDict对象

    类的原型:class QueryDict[source] 在HttpRequest对象中,GET和POST属性都是一个django.http.QueryDict的实例.也就是说你可以按本文下面提供的方 ...

  3. 简说Spring事务

    一.事务定义: 事务指逻辑上的一组操作,这组操作要么全部成功,要么全部失败. 二.事务的特性: 1. 原子性 - 指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生. 2. 一致性 ...

  4. python数据持久存储-pickle模块

    pickle模块实现了基本的数据序列和反序列化.pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,通过pickle模块的反序列化操作,能够从文件中创建上一次程序保存的对象. 接 ...

  5. HDU 2569 彼岸

    彼岸 思路:动态规划.因为不能有连续三个不同的颜色,所以只要看最后三个就可以了. 设dp[n]为长度为n到达彼岸的方案数. ①当第n-2个颜色和第n-1个颜色相同时,第n个位置可以取任意一种颜色,dp ...

  6. Servlet / Tomcat / Spring 之间的关系

    0.基础知识 在idea中打开servlet的源码: 可以看见servlet就是一个接口:接口就是规定了一些规范,使得一些具有某些共性的类都能实现这个接口,从而都遵循某些规范. 有的人往往以为就是se ...

  7. python模块——socket (实现简单的C/S架构端通信操作CMD)

    # 服务端代码#!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = "loki" import socket impo ...

  8. ansible-playbook快速入门填坑

    参考另外一篇文章 http://blog.51cto.com/weiweidefeng/1895261 when条件 参考http://blog.51cto.com/breezey/1757593 安 ...

  9. YOLO v2 损失函数源码分析

    损失函数的定义是在region_layer.c文件中,关于region层使用的参数在cfg文件的最后一个section中定义. 首先来看一看region_layer 都定义了那些属性值: layer ...

  10. poj 1182 (带权并查集)

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 71361   Accepted: 21131 Description ...