方法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. HDU 6128 Inverse of sum(同余)

    http://acm.hdu.edu.cn/showproblem.php?pid=6128 题意:有一个a数列,并且每个数都小于p,现在要求有多少对$(i,j)$满足$\frac{1}{a_i+a_ ...

  2. 使用wsHttpBinding构建Message安全模式和UserName授权

    http://www.cnblogs.com/artech/archive/2011/05/22/authentication_01.html https://www.cnblogs.com/Fran ...

  3. python 处理命令行参数--转载

    标题写了那么久,现在现在才有时间,整理下自己的思路.首先先总结下自己对sys模块的理解.手册上对sys的描述是系统参数和系统函数,这里的系统实际上是python解释器.这个模块提供了用户可以访问的解释 ...

  4. python 集合交补

    setx = set(["apple", "mango"]) sety = set(["mango", "orange" ...

  5. Ubuntu14.04 server (amd64)修改源

    1.备份原来的源文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.修改源 sudo vi /etc/apt/sources.li ...

  6. 终于用ADB连上平板了

    可以看到设备管理器里, ADB Interface 设备装不上驱动. 1,百度到的内容,没有一个靠谱的. 2,google到内容了, 却因为看的不仔细,浪费了好多时间...(android自己的文章都 ...

  7. 20170609批量生成WORD合同

    Sub NextSeven_CodeFrame() Application.ScreenUpdating = False Application.DisplayAlerts = False Appli ...

  8. 12月16日 增加一个购物车内product数量的功能, 自定义method,在helper中定义,计算代码Refactor到Model中。

    仿照Rails实战:购物网站 教材:5-6 step5:计算总价,做出在nav上显示购物车内product的数量. 遇到的❌: 1. <% sum = 0 %> <% current ...

  9. Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  10. Jzzhu and Apples CodeForces - 449C (构造,数学)

    大意: 求从[1,n]范围选择尽量多的数对, 使得每对数的gcd>1 考虑所有除2以外且不超过n/2的素数p, 若p倍数可以选择的有偶数个, 直接全部划分即可 有奇数个的话, 余下一个2*p不划 ...