//已知宽高的情况
.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. 并发编程---互斥锁---互斥锁与join的区别

    互斥锁 互斥锁:就是把多个进程并发,修改成一块共享数据的操作变成串行,保证是一个一个来修改的. 缺点:效率低,加锁过程复杂 优点:增加了安全性 from multiprocessing import ...

  2. Git的安装和配置用户名和密码

    在Windows中进行安装.访问https://git-scm.com/,点击Downloads for Windows,我下载的是Git-2.16.2-64-bit.exe.都按照默认选项即可,其中 ...

  3. [Java] Frequently used method or solutions for issues

    模板: Split string into parts based on new line in java Solution:   Reference is here. 1) get out of t ...

  4. 《算法笔记》8.1小节——搜索专题->深度优先搜索(DFS)

    http://codeup.cn/contest.php 5972 这是递归的入门题,求全排列,第一种方法用STL中的函数next_permutation,可以很容易的实现.首先建立好数组,将需要全排 ...

  5. Xcode 常用命令

    一些自己在开发过程中总结的命令,并不是完整的,会不断的更新. 1.图片转png格式 sips -s format png start.jpg --out StartBg.png 转换时,先cd 当前图 ...

  6. iOS UI进阶-4.0 地图与定位

    在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院   在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能 ...

  7. UVA 11168 Airport(凸包)

    Airport [题目链接]Airport [题目类型]凸包 &题解: 蓝书274页,要想到解析几何来降低复杂度,还用到点到直线的距离公式,之后向想到预处理x,y坐标之和,就可以O(1)查到距 ...

  8. Spring.之.jar包官网下载

    jar包官网下载 1. 官网下载网址:http://repo.spring.io/libs-release 2. 用到的jar包所在路径:org/springframework/spring/ ,在此 ...

  9. /*使用PHP创建一个数组,保存5個员工的信息(ename/sex/salary/birthday/pic)*/

    <?php/*使用PHP创建一个数组,保存5個员工的信息(ename/sex/salary/birthday/pic)*/$empList=[    ['ename'=>'张学友','se ...

  10. CSS3 transition-timing-function 深入理解和技巧

    基础 语法: transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier( ...