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

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. hbase master一直报启动不起来问题（region空洞和region卡在spilt）

    数据不重要或者一直卡着的情况下,可以切换hdfs用户到hbase的wal目录下对spilting的数据进行重命名.具体步骤如下 1.关闭hbase集群 2.切换hdfs用户 3.到hbasewal目录 ...

  2. vue-admin-template模板添加tagsview

    参考: https://github.com/PanJiaChen/vue-admin-template/issues/349 一.从vue-element-admin复制文件: vue-admin- ...

  3. linux 显示ip地址小工具-nali

    1.下载软件包 wget http://qqwry.googlecode.com/files/nali-0.1.tar.gz 2.安装 tar -zxvf nali-0.2.tar.gz cd nal ...

  4. Python之MySQL语法（增删改查）

    -- ID: 新闻的唯一标示 -- title: 新闻的标题 -- content: 新闻的内容 -- created_at: 新闻添加的时间 -- types: 新闻的类型 -- image: 新的 ...

  5. HZOI20190818模拟25题解

    题面:https://www.cnblogs.com/Juve/articles/11372379.html A:字符串 其实是CATALAN数水题... 和网格一毛一样:https://www.cn ...

  6. windows下docker 启动jenkins成功，浏览器无法访问，拒绝了我们的连接

    [问题现象] 在Windows下使用docker启动了一个jenkins,翻越了无数的坑,最后的启动命令为 docker run --name jenkins -u root -p 8000:8000 ...

  7. jeecms v9.3 has a stroed xss vulnerability

    转载:https://blog.csdn.net/libieme/article/details/83588929 jeecms v9.3 has a stroed xss vulnerability ...

  8. 2019-4-6-VisualStudio-编码规范工具-2.6-修改当前文件编码

    title author date CreateTime categories VisualStudio 编码规范工具 2.6 修改当前文件编码 lindexi 2019-04-06 15:31:53 ...

  9. HDFS常用Java API

  10. 如何提高英语听力（内容摘自NECCS）+ 乘法表

    乘法表 print('\n'.join([' '.join(['%s*%s=%-2s'%(y,x,x*y) for y in range(1,x+1)]) for x in range(1,10)]) ...