垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论

1.父盒子固定高度[定位]

实现1:

father-box: position:relative

child-box:position:absolute+left:50%+top:50%+translate(-50%,-50%)

实现2:

father-box:position:relative

child-box: position:absolute+top:0+right:0+bottom:0+left:0+margin:auto

2.父盒子不固定高度[弹性盒子]

实现1

father-box:display:table

child-box:display:table-cell+vertical-align:middle+text-align:center

实现2:

father-box:display:flex+align-items:center+justify-content:center

child-box:flex:1

css 垂直+水平居中的更多相关文章

  1. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  2. 关于css垂直水平居中的几种方式

    css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...

  3. css 垂直水平居中总结

    一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...

  4. CSS垂直水平居中方法整理

    CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...

  5. css垂直水平居中方案

    1. 水平居中 如果是inline元素:在父元素上面设置text-align:center; 如果是block元素:设置宽度和margin:0 auto; 如果是多块级元素:在父元素上面设置text- ...

  6. (转载)css垂直水平居中的整理

    方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...

  7. CSS垂直水平居中

    小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...

  8. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  9. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

随机推荐

  1. python3-常用模块之time

    import time time模块主要是处理各种类型的时间 常用方法 1.time.sleep(secs) (线程)推迟指定的时间运行,单位为秒. 2.time.time() 获取当前时间戳 时间戳 ...

  2. 常用的函数:atoi,itoa,atof,_ttoi等

    出自http://blog.csdn.net/zzyoucan/article/details/10260093 atoi---ASCII to integer,将字符串转换成整形,从数字或正负号开始 ...

  3. 第一个简单netty程序

    一个简单的netty的程序,主要是netty的客户端和服务端通信. 大部分说明都写在代码注释中 netty server TimeServer import io.netty.bootstrap.Se ...

  4. Redis高级命令的使用学习

  5. 分布式事务中间件 Fescar—RM 模块源码解读

    前言 在SOA.微服务架构流行的年代,许多复杂业务上需要支持多资源占用场景,而在分布式系统中因为某个资源不足而导致其它资源占用回滚的系统设计一直是个难点.我所在的团队也遇到了这个问题,为解决这个问题上 ...

  6. python字典的基本操作,以及可变数据类型和不可变数据类型的区分

    字典:采用键值对存储数据的数据类型,字典的键必须是不可变的数据类型 补充: 不可变(可哈希)数据类型:str,bool,int,tuple 可变(不可哈希)数据类型:list,  dict, set ...

  7. 如何实现shell并发 一个入门级可控多线程shell脚本方案

     如何实现shell并发      很多人都问我如何写shell脚本,如何实现同时给三台ftp服务器上传文件,如何同时检测三台服务器是否alive等,其实这就是想实现shell的并发.那么shell并 ...

  8. 转:fork与vfork的区别

    源地址:http://blog.csdn.net/jianchi88/article/details/6985326 有大量驱动文章 fork()与vfock()都是创建一个进程,那他们有什么区别呢? ...

  9. struts2-自定义拦截器-struts2标签

    1 自定义拦截器 1.1 架构 1.2 拦截器创建 创建方式1 创建方式2 创建方式3 ★★★★ 1.3 拦截器api 放行 前后处理 不放行,直接跳转到一个结果页面 不执行后续的拦截器以及Actio ...

  10. VS2005编译VTK5.10.1

    1.从官方下载源文件和数据文件解压到同一个文件夹 2.下载并安装cmake 3.打开cmake选择VTK源文件路径和编译生成路径 注意:在路径里面不能出现中文字符!(我觉得以后的路径尽可能不要有中文字 ...