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 ...
随机推荐
- Redis集群学习笔记
Redis集群学习笔记 前言 最近有个需求,就是将一个Redis集群中数据转移到某个单机Redis上. 迁移Redis数据的话,如果是单机Redis,有两种方式: a. 执行redis-cli shu ...
- gcc 编译出现 internal compiler error: Killed
系统没有交换分区, 编译过程中内存耗尽, 导致了编译中断 …解决方式也很简单, 就是增加一个交换分区: 创建分区文件, 大小 2G dd if=/dev/zero of=/swapfile ...
- Jmeter性能测试 对服务器使用资源进行监控之ServerAgent插件使用
百度云盘友情赞助地址如下: 链接:https://pan.baidu.com/s/1cpAeOcfFX8kss1eo79UD9g 密码:b8o7 在windows上或者linux上打开服务 用Jmet ...
- 运行gulp提示:Task function must be specified
问题出在gulp版本上,以下是gulp3 VS gulp4的区别: gulp4最大的变化是不能像以前那样传递一个依赖的任务列表. gulp3中,如果有一个任务A.B和C的列表,你想在一个序列中运行 ...
- HttpClient的用法总结
使用HttpClient连接服务端的步骤: 1.创建HttpClient客户端对象 HttpClient client = new DefaultHttpClient(); 2.创建请求对象 ...
- dat.gui.js
].appendChild(b)},inject:function(e,a){a=a||document;].appendChild(b)}}}(); dat.utils.common=functio ...
- Win10安装Mysql5.7数据库
Win10安装Mysql5.7数据库 最近做个demo在自己本地装了一个mysql5.7,有些小麻烦记录一下. 安装环境:系统是 windows 10 1.官网下载 下载地址:https://dev. ...
- Yii中的CComponent应用实例
首先我们先了解一下如何创建一个CComponent,手册讲述如下: CComponent 是所有组件类的基类. CComponent 实现了定义.使用属性和事件的协议. 属性是通过getter方法或/ ...
- English trip -- VC(情景课) 7 A Shopping 购物
Words The clothes place a dress 长裙 short skirt 短裙 pants 裤子 / trousers 长裤 / shorts 短裤 a shir ...
- mysql--------char 和 varchar 的区别
char是一种固定长度的类型,varchar则是一种可变长度的类型,它们的区别是: char(M)类型的数据列里,每个值都占用M个字节,如果某个长度小于M,MySQL就会在它的右边用空格字符补足.(在 ...