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. 《黑白团团队》第八次团队作业:Alpha冲刺 第一天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. [Alpha] Scrum meetin ...

  2. NEFU 118

    其实一道公式题: n!中素数i的幂为: [n/i]+[n/i^2]+[n/i^3]+[n/i^4]+...... #include <iostream> #include <cstd ...

  3. CF149D 区间dp

    http://codeforces.com/problemset/problem/149/D D. Coloring Brackets time limit per test 2 seconds me ...

  4. Linux 程序设计学习笔记----Linux下文件类型和属性管理

    转载请注明出处:http://blog.csdn.net/suool/article/details/38318225 部分内容整理自网络,在此感谢各位大神. Linux文件类型和权限 数据表示 文件 ...

  5. WebRTC开源项目一览之二

    .Kurento视频直播系统4.1  应用实例搞视频会议就会涉及一对多.多对多.广播.转码.混音.合屏.录制,这就需要用到流媒体服务器,而kurento就具有这些功能.他主要用来作为webrtc的流媒 ...

  6. ORACLE RAC 11G 添加以及删除UNDO表空间

    在生产环境上,由于闪存盘的容量有限,现在需要将闪存盘里面的UNDO表空间,替换到非闪存的磁盘里面. 磁盘的使用情况如下: 表空间使用情况如下: RAC两个节点占用将近167G的空间. 操作步骤如下: ...

  7. BZOJ 1786 DP

    思路: 肯定从小往大填合适了 f[i][j]表示第i个数是j的最少逆序对数 f[i][j]=min(f[i-1][k]+cost,f[i][j]) 优化一下成O(nk)就好啦~ (不优化也可以过的-) ...

  8. CaffeExample 在CIFAR-10数据集上训练与测试

    本文主要来自Caffe作者Yangqing Jia网站给出的examples. @article{jia2014caffe, Author = {Jia, Yangqing and Shelhamer ...

  9. C# 实现透明可移动窗体

    1.设置窗体属性 this.BackColor this.TransparencyKey = this.BackColor; 2.窗体加载图片 this.BackgroundImage = globa ...

  10. Oracle学习系类篇(三)

    1. 存储过程 CREATE  OR REPLACE PROCEDURE  SP_NAME( PM_NAME [IN/OUT/IN OUT] PM_TYPE...)            {AS}   ...