//已知宽高的情况
.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. ES7 async 函数

    async 函数 let getdata=function(){ return new Promise((resolve,reject)=>{ resolve('aaa'); }) } let ...

  2. 【Java】-NO.13.Java.1.Foundation.1.001-【Java IO】-

    1.0.0 Summary Tittle:[Java]-NO.13.Java.1.Foundation.1.001-[Java IO]- Style:Java Series:Foundation Si ...

  3. fullPage最后一屏自适应

    fullpage最后一屏可以有多少内容展示多少内容 1.需要引用一个滚动条 插件:jquery.slimscroll.js 2.引用一个属性   'scrollOverflow': true, 备注: ...

  4. cocos2d-x C++ 原始工程引擎运行机制解析

    新建一个工程,相信感兴趣的同学都想知道cocos引擎都是如何运行的 想知道是如何运行的,看懂四个文件即可 话不多说,上代码: 1.首先解释 AppDelegate.h #ifndef _APP_DEL ...

  5. linux c语言开发工具

    ---恢复内容开始--- C语言编译全过程剖析 编译的概念:编译程序读取源程序(字符流),对之进行词法和语法的分析,将高级语言指令转换为功能等效的汇编代码,再由汇编程序转换为机器语言,并且按照操作系统 ...

  6. keepalived+双主架构

    简介 keepalived是基于VRRP协议的,全称 Virtual Redundent Routing Protocal 虚拟路由协议,为解决静态路由单点故障引起的网络失效问题设计的一套主备协议 两 ...

  7. Python记录4:文件操作

    ###文件 ''' 1. 什麽是文件     文件是操作系統為用戶/应用程序提供一種操作硬盤的虚拟单位 2. 爲何要用文件     为了存取硬盘数据 3. 如何用文件 #1. 打開文件 #2. 读写文 ...

  8. QT5中QByteArray转QString中文乱码

    1.添加头文件 #include <QTextCodec> 2.用QTextCodec 设置格式转换 QByteArray barr; barr.insert(0,(char*)(pMsg ...

  9. [6]Windows内核情景分析 --APC

    APC:异步过程调用.这是一种常见的技术.前面进程启动的初始过程就是:主线程在内核构造好运行环境后,从KiThreadStartup开始运行,然后调用PspUserThreadStartup,在该线程 ...

  10. python多版本控制

    1安装git # yum install git -y 2.安装python依赖 # yum -y install gcc make patch gdbm-devel openssl-devel sq ...