//已知宽高的情况
.div1_container{
    border:1px solid #00ee00;
    height:300px;
    position:relative;
}
.div1_center{
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
    width:200px;
    height:200px;
    border:1px solid red;
}
//未知宽高的情况
.div2_container{
    text-align:center;
    height:400px;
    border:1px solid #0000ed;
}
.div2_container:before{
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.div2_center{
    display:inline-block;
    vertical-align:center;
    border:1px solid red;
}

已知宽高和未知宽高的div块的水平垂直居中的更多相关文章

  1. 先查出已知的 然后将未知的当做 having里面的条件

    先查出已知的 然后将未知的当做 having里面的条件

  2. CSS子元素居中(父元素宽高已知,子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  3. java基础 File与递归练习 使用文件过滤器筛选将指定文件夹下的小于200K的小文件获取并打印按层次打印(包括所有子文件夹的文件) 多层文件夹情况统计文件和文件夹的数量 统计已知类型的数量 未知类型的数量

    package com.swift.kuozhan; import java.io.File; import java.io.FileFilter; /*使用文件过滤器筛选将指定文件夹下的小于200K ...

  4. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  5. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  6. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  7. table-cell实现未知宽高图片,文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  8. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  9. css 水平垂直居中显示(定高不定高定宽不定宽)

    position 元素已知宽度 <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

随机推荐

  1. 利用 PorterDuff 动态改变资源色值,缩减安装包大小

    利用 PorterDuff 改变资源原有色值,从而实现只需要一个资源文件,就可以表示几种不同的状态,如在线或者离线等等 public Drawable colorDrawable(Resources ...

  2. 【EatBook】-NO.2.EatBook.2.JavaArchitecture.1.001-《修炼Java开发技术在架构中体验设计模式和算法之美》-

    1.0.0 Summary Tittle:[EatBook]-NO.2.EatBook.2.JavaArchitecture.1.001-<修炼Java开发技术在架构中体验设计模式和算法之美&g ...

  3. docker machine 使用教程

    之前,Docker的安装流程非常复杂,用户需要登录到相应的主机上,根据官方的安装和配置指南来安装Docker,并且不同的操作系统的安装步骤也是不一样的.而有了Machine后,不管是在笔记本.虚拟机还 ...

  4. mybatis 调用oracle存储过程如何返回out参数值

    调试了半天,其实整体用map传入传出也挺简单, 主要是调用存储过程 select标签里平时习惯不写 statementType="CALLABLE",调用没有out参数时也能正常用 ...

  5. 虚拟地址IP

    http://blog.csdn.net/whycold/article/details/11898249

  6. myloader原理介绍

    myloader恢复主要流程   1.首先由myloader主线程完成建库建表,依次将备份目录下建库和建表文件执行应用到目标数据库实例中:   2.接着myloader主线程会生成多个工作线程,由这些 ...

  7. MySQL--5子查询与连接小结

    子查询:出现在其他sql语句中的 SELECT,必须出现在小括号内,子查询外层可以是常见的SELECT语句,INSERT语句 UPDATE语句 DELETE语句,在子查询中可以包含多个关键字和条件 ( ...

  8. 前端获取的数据是undefined

    var id = $("id1").val(); var username = $("username1").val(); var password = $(& ...

  9. recover database noredo时报错ORA-19573

    环境: RHEL6.4 + Oracle 11.2.0.4 Primary RAC + Standby RAC 今天发现DG备库归档空间满,清理后发现备库出现GAP,需要从主库做基于SCN的增量备份进 ...

  10. ES6学习之 解构赋值

    最近看了一个vue的项目,发现作者大量使用了ES6的语法,包括async, Promise, Set, Map还有一些解构赋值, 才发现自己对于ES6的语法缺乏了总结和运用,看得有点艰难,所以重新学习 ...