css实现垂直居中的几种方法
方法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实现垂直居中的几种方法的更多相关文章
- 顽石系列:CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- [转]-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 ...
- CSS 元素垂直居中的 6种方法
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...
- 纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...
- css 水平居中垂直居中的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS实现垂直居中的7种方法
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
随机推荐
- CSU 1805 Three Capitals(矩阵树定理+Best定理)
http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1805 题意: A和B之间有a条边,A和G之间有b条边,B和G之间有c条边.现在从A点出发走遍所 ...
- 浅谈PHP5中垃圾回收算法
原文链接:http://www.cnblogs.com/leoo2sk/archive/2011/02/27/php-gc.html PHP是一门托管型语言,在PHP编程中程序员不需要手工处理内存资源 ...
- np.linspace
来自:有一种宿命叫无能为力 在指定的间隔内返回均匀间隔的数字.(返回num个样本数据,在[start, stop]). 函数形式: linspace(start, stop, num = 50, en ...
- a 样式重置 常见用法
样式重置 a:link, a:visited, a:hover, a:active{ color: #fff; text-decoration: none; } 常见用法 ( rel=& ...
- C++数组引用
C++数组引用 一.数组引用 C++数组的引用:引用即别名这样比指针传地址方便多了 形参中的(&a)[10]可以就看做a数组的别名,肯定要指定数组大小,如果没有后面的数组大小,天知道是变量还是 ...
- 2017-03-03 Oracle在.Net中出现未在本地计算机上注册“OraOLEDB.Oracle”提供程序的错误
在前面的Oracle配置完成后,打开项目运行出错,出现未在本地计算机上注册“OraOLEDB.Oracle”提供程序的错误,看到“注册”两个字,首先想到,难道还要用命令行注册一下?果不其然,需要手动注 ...
- English trip -- VC(情景课)5 Around Town
Around Town 城市周围 Talk about the picture 看图说话 sentences Where are you? I'm in the Meten classroom. ...
- Jersey 2.x 从Maven Archetype 创建一个新项目
创建 Jersey 工程需要使用 Apache 的 Maven 软件工程和管理工具.所有的Jersey产品模块都可以在 Maven中央库 中找到.这样的话 Jersey 可以非常容易和其他基于 Mav ...
- Many Easy Problem
转自hwk0518,不胜感谢,侵删.
- python-day15函数递归
1.递归: 在函数内,调用自己. (技巧: 每次调用时,函数前面需加上return,这样返回值就可以一层一层 的返回去) #def age(n):# if n == 1:# re ...