1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行:

parentElement{
position:relative;
} childElement{
position: absolute;
top: 50%;
transform: translateY(-50%); }

2.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可

    parentElement{
height:xxx;
} .childElement {
position: relative;
top: 50%;
transform: translateY(-50%);
}
不考虑兼容老式浏览器的话,用Flex布局简单直观一劳永逸:

parentElement{
display:flex;/*Flex布局*/
display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}

css不定高度实现垂直居中的更多相关文章

  1. 不定高度实现垂直居中(兼容低版本ie)

    css实现垂直居中的方法比较多,但是每种方法的缺陷也很明显,我尝试对其中一种方法进行了改良 先看原方法: <div class="parent"> <div cl ...

  2. css不定高图文垂直居中的三种方法

    html部分 <div class="box"> <img class="img" src="http://p2.so.qhmsg. ...

  3. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  4. css实现ie6以上文字高度未知垂直居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  6. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  8. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  9. CSS中设置div垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. 【hdu 6351】Beautiful Now

    [链接] 我是链接,点我呀:) [题意] 你可以最多交换k次数字. 让你组成一个最大的和一个最小的数字. [题解] 直接写个bfs.求出所有状态的最小交换次数. 但是最大值和最小值分开写. 做最大值的 ...

  2. 2015 Multi-University Training Contest 10 hdu 5411 CRB and Puzzle

    CRB and Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  3. kfka学习笔记一:使用Python操作Kafka

    1.准备工作 使用python操作kafka目前比较常用的库是kafka-python库,但是在安装这个库的时候需要依赖setuptools库和six库,下面就要分别来下载这几个库 https://p ...

  4. BA--关于江森的学习笔记

    机房功率密度:“每机架”功耗 数据中心效率:平均 PUE 2.5,百度是1.36,苹果是1.06 绿色数据中心:PUE<1.58 机房环境:空气质量,配电,UPS,空气处理系统,发电机,江森OD ...

  5. ORM进阶之Hibernate中对象的三大状态解析

    ORM进阶之 ORM简单介绍 ORM进阶之Hibernate简单介绍及框架搭 ORM进阶之Hibernate的三大对象 ORM进阶之Hibernate中对象的三大状态解析 在Hibernatea中每一 ...

  6. 【翻译自mos文章】怎么startup/shutdown PDB?

    怎么startup/shutdown PDB? 来源于: 12c: How to Startup/Shutdown PDB's? (文档 ID 1592247.1) 适用于: Oracle Datab ...

  7. Spring学习笔记(二) 初探Spring

    版权声明 笔记出自<Spring 开发指南>一书. Spring 初探 前面我们简单介绍了 Spring 的基本组件和功能,现在我们来看一个简单示例: Person接口Person接口定义 ...

  8. 如何版本化你的API?--转

    原文地址:http://www.infoq.com/cn/news/2017/09/How-versioning-API 如何版本化API需要考虑各种实际业务场景,但是一个完备的API应该是: 和客户 ...

  9. JavaScript中闭包的理解

    1.什么是闭包 我个人理解闭包就是函数中嵌套函数,但是嵌套的那个函数必须是返回值,才构成闭包: <!DOCTYPE html> <html> <head> < ...

  10. 安卓input框获取焦点时,底部按钮会顶上去的解决方法

    var h = document.body.scrollHeight;window.onresize = function(){ if (document.body.scrollHeight < ...