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. jQuery练习总结(二)

    --------------------------------------- <!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C/ ...

  2. Windows-命令窗口-强制关机命令

    Windows +R CMD  命令行窗口shutdown -s -f -t 以上参数中的-s代表关机,-f表示强制关闭所有应用程序,-t 00代表不用等待立即执行(时间以秒计算,把时间改长就变成了定 ...

  3. 拷贝构造函数(深拷贝vs浅拷贝)

    拷贝构造函数(深拷贝vs浅拷贝) 类对象之间的初始化是由类的拷贝构造函数完毕的.它是一种特殊的构造函数,它的作用是用一个已知的对象来初始化还有一个对象.假设在类中没有显式地声明一个拷贝构造函数.那么, ...

  4. 编写高质量的Makefile

    源地址 :http://blog.csdn.net/maopig/article/details/6801749 一.前言 回想自己的第一个Makefile,是这个样子的 CODE hello:hel ...

  5. SQL Server 计算汉字笔画函数

    create function [dbo].[fun_getbh](@char nchar(2)) returns int as begin return( case when unicode(@ch ...

  6. PHP的错误处理和异常处理

    由于教程是围绕着文件打开做的错误处理,所以先记录几个用于文件处理的一些函数,fopen 用于打开一个文件:file_exists 用于检查目录是否存在:fclose( $变量 )用于指定关闭打开的文件 ...

  7. Codeforces 993A. Two Squares(暴力求解)

    解题思路(暴力解法) 平行于x轴的正方形和与x轴成45度倾斜的正方形相交的点中必定有整数点.即若两正方形相交,必定存在整数i,j,使(i,j)同时属于两个正方形. 我们把两个正方形中的整数点都找出来, ...

  8. 在APP开发设计中,为什么APP开发公司要慎用左右横滑设计?

    移动端屏幕越来越大,但用户对内容量的要求也水涨船高.如何在有限的屏幕内透出更多的内容,是设计师们研究的重点. 常用的内容拓展设计有:Y 方向 List 滑动.Z 方向 3D Touch .入口式内容折 ...

  9. socket代码(简单)

    SERVER: #!/usr/bin/python # -*- coding: utf-8 -*- import socket import time s = socket.socket(socket ...

  10. Visual Studio icon 含义

    图片摘自:https://msdn.microsoft.com/en-us/library/y47ychfe.aspx