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. java8新特性:利用Lambda处理List集合

    Java 8新增的Lambda表达式,我们可以用简洁高效的代码来处理List. 1.遍历 public static void main(String[] args) { List<User&g ...

  2. jedis 连接 redis

    一.连接单机版的 redis /** * 直接连接 redis * @throws Exception */ @Test public void test1() throws Exception { ...

  3. [jQuery]ajax同步请求在方法内问题

    在函数内写$.ajax() 的成功函数中return 的值,并没有return到外层方法返回至

  4. Java 嵌套类和内部类演示样例&lt;三&gt;

    <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...

  5. Java ZIP压缩和解压缩文件(解决中文文件名乱码问题)

    Java ZIP压缩和解压缩文件(解决中文文件名乱码问题) 学习了:http://www.tuicool.com/articles/V7BBvy 引用原文: JDK中自带的ZipOutputStrea ...

  6. iOS:编译错误[__NSDictionaryM objectAtIndexedSubscript:]: unrecognized selector sent to instance 0xa79e61

    这个意思是,__NSDictionaryM  无法将值传到下标索引对象,言简意赅就是数组越界.可是再看看,这是数组吗?不是,所以.遇到这样的crash,我这里有两种情况: 1.首先看看你 indexP ...

  7. 0x05 排序

    说是排序结果就是各种奇技淫巧 中位数被坑多了久病成医,例题一题搞笑一题糖果传递(昨晚精神那么好效率还那么差) #include<cstdio> #include<iostream&g ...

  8. Navicat Premium 12 模型导出sql

    找了半天,终于找到导出sql了!

  9. [POI 2007] 旅游景点

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1097 [算法] 首先,用Dijkstra算法求出2-k+1到每个点的最短路 然后,我 ...

  10. mysql授予IP远程访问访问语句

    mysql -u root -p; GRANT ALL PRIVILEGES ON *.* TO '用户名'@'你的IP地址' IDENTIFIED BY '密码' WITH GRANT OPTION ...