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 ...
随机推荐
- Spring生态顶级项目说明
1.Spring IO platform 说明:用于系统部署,是可集成的,构建现代化应用的版本平台 2.Spring Boot 说明:旨在简化创建产品级的 Spring 应用和服务,简化了配置文件,使 ...
- java日期操作 大全
先来一个: 取得指定月份的第一天与取得指定月份的最后一天 http://iamin.blogdriver.com/iamin/847990.html )); } ...
- English trip -- VC(情景课)10 A Get ready 预备课
Words dance 跳舞 exercise 运动:锻炼 fish 鱼 play basketball 打篮球 play cards 玩牌 swim 游泳 decorations 装饰品 ...
- (转)代号为Purley的新一代服务器平台
英特尔(Intel)正式发布了代号为Purley的新一代服务器平台,包括代号为Skylake的新一代至强(Xeon)CPU,命名为英特尔至强可扩展处理器(Intel Xeon Scalable Pro ...
- Android之RecyclerView实现时光轴
做项目的过程中有个需求需要时光轴,于是网上找了部分资料 ,写了个案例,现在分享给大家. 如图: activity_main.xml <?xml version="1.0" e ...
- PHP函数总结 (六)
<?php /** * 递归函数(自调用函数): * 在函数体内直接或间接的自己调用自己 * 通常有一个条件判断是否需要执行递归,并且在特定条件下终止函数的递归调用动作,把目前流程的主控制权交回 ...
- Oracle性能诊断艺术-读书笔记
create table test0605 as select * from dba_objects; select t1.owner,t1.object_name,t1.object_id from ...
- failed to load response data
当需要根据后台传回地址跳转页面时 即使使用preserve log 可以查看上一个页面获取地址请求,但是此时请求返回值为failed to load response data 当关闭页面跳转可以查看 ...
- 硬盘分区表知识——详解硬盘MBR (转)
Ref: http://www.blogjava.net/galaxyp/archive/2010/04/25/319344.html 硬盘是现在计算机上最常用的存储器之一.我们都知道,计算机之所以神 ...
- Erlang:Error in process ... with exit value
=ERROR REPORT==== 10-Apr-2015::16:30:04 ===Error in process <0.218.0> with exit value: {badarg ...