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 ...
随机推荐
- python学习站点
1.python 外部扩展网址 http://www.lfd.uci.edu/~gohlke/pythonlibs Python Extension Packages 2.web2py学习 http: ...
- Ubuntu禁用触摸板
参考链接: http://www.linuxidc.com/Linux/2012-08/68831.htm http://blog.sina.com.cn/s/blog_a3052b4a0100z4u ...
- Cocos2d-x学习笔记(七)菜单
菜单类继承关系如下: 图1 菜单类继承关系 文本菜单只能显示文本,包括:MenuItemLabel.MenuItemFont和MenuItemAtlasFont: #include "Hel ...
- Redis 5种数据结构及其使用场景举例--STRING
String 数据结构是简单的 key-value 类型,value 不仅可以是 String,也可以是数字(当数字类型用 Long 可以表示的时候encoding 就是整型,其他都存储在 sdshd ...
- shell 字符串运算符
字符串运算符 下表列出了常用的字符串运算符,假定变量 a 为 "abc",变量 b 为 "efg": 运算符 说明 举例 = 检测两个字符串是否相等,相等返回 ...
- JVM内存管理的机制
Eclipse崩溃,错误提示:MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) sp ...
- BeyondCompare
BeyondCompare可对文本,照片,文件夹,注册表等等进行比较 在git看不清楚版本和改动项的时候,直接将生产上的包拉下来和即将发布的包,作对比.
- JavaScript 基础知识入门
js3种弹出框 alert消息对话框 var mychar=I love JavaScript;alert(mychar); confirm消息对话框 返回值:bool var mymessage ...
- JSON自定义排序
var json=[{ Name:'张三', Addr:'重庆', Age:'20' },{ Name:'张三3', Addr:'重庆2', Age:'25' },{ Name:'张三2', Addr ...
- Kafka特性
———————————————————————————————————————————————— [关键原理] 1.消息文件存储(消息堆积能力) 2.消息topic分区 3.消息顺序的保证 4.拉模型 ...