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. Maven Hibernate

    1.使用maven管理Hibernate实现自动装配jar包 2.需要在配置文件pom.xml中引入 如:引入hibaernate5.2.11.Final版本的jar包,需要做如下配置: <!- ...

  2. HDU 3567 Eight II

    Eight II Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on HDU. Original ID: 3 ...

  3. Python docs

    刚刚发现了Python好用的文档查询网页:Python docs,可以选择python版本查询,跟OpenCV docs很相似,很好用-

  4. jquery-ajax基础-XMLHttpRequest

    XMLHttpRequest知识点 原生的ajax代码 var xmlhttp; // 声明一个对象 if (window.XMLHttpRequest) {// code for IE7+, Fir ...

  5. BA--三相异步电机_星三角降压启动

    星一三角启动就是一种简单方便的降压启动方式,同时还可通过手动和自动操作控制方式实现. 星三角起动的优点还是很显著的,因为同任何别的减压起动器相比较,其结构最简单,价格也最便宜 除此之外,星三角起动方式 ...

  6. lim的日常生活

     

  7. QTP自带订票实现循环执行,參数化和将异常提示信息输出

    做这个样例主要是为了积累一些较基础的知识,以便日后可參考学习 这个样例是一个订票的C/Sclient程序 一.业务需求: 1.实现异常和正常数据登录窗体,系统对数据进行校验 2.登录成功后.进行订票业 ...

  8. hashmap的put方法源码分析

    put主源码如下: public V put(K key, V value) { if (key == null) return putForNullKey(value); int hash = ha ...

  9. tcMalloc 配置和优化 nginx 高性能

    tcMalloc优化nginx  记住:nginx一定要先启动 1>下载安装libunwind: #wget  http://download.savannah.gnu.org/releases ...

  10. c 语言函数可变參数的处理

    /************************************************************************* > File Name: va_list.c ...