//已知宽高的情况
.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. 关于Redis的配置

    Redis-配置 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时,Redis默认会把pid ...

  2. Redis入门到高可用(一)——初识Redis

    一.Redis是什么 * 开源 * 基于键值的存储服务系统 * 支持多种数据结构 * 高性能,功能丰富 二.Redis特性 ♦️ 概述 * 速度快 * 支持持久化 * 支持多种数据结构 * 支持多种编 ...

  3. abap事件。

    1:https://www.w3cschool.cn/sap_abap/sap_abap_object_events.html *&------------------------------ ...

  4. Spark Mllib之分层抽样

    Spark中组件Mllib的学习之基础概念篇 1.解释 分层抽样的概念就不讲了,具体的操作: RDD有个操作可以直接进行抽样:sampleByKey和sample等,这里主要介绍这两个 (1)将字符串 ...

  5. android studio 设置安装不占用C盘

    我们知道,android studio 安装会占用大量的空间,比如我们我们将andriod status 安装到了D:\IDE\Android Studio这里,但是你会发现,在编译出包过程中,C盘的 ...

  6. iOS UI基础-12.0 Storyboard

    storyboard创建控制器 1.先加载storyboard文件(Test是storyboard的文件名) UIStoryboard *storyboard = [UIStoryboard stor ...

  7. Web API 入门 二 媒体类型

    还是拿上面 那篇 Web API 入门 一  的那个来讲 在product类中加一个时间属性

  8. vue中使用echarts来绘制世界地图和中国地图

    第一步,下载echarts cnpm install echarts --save-dev 第二步,在main.js中全局引入 //引入echarts import echarts from 'ech ...

  9. JAVA8方法引用

    方法引用:若Lambda方法体已经实现,我们可以使用方法引用* 主要有三种语法格式:* 对象::实例方法名* 类::实例方法名* 类::静态方法名** 注意:Lambda体中调用的方法的参数列表与返回 ...

  10. TP引用样式表和js文件及验证码

    TP引用样式表和js文件及验证码 引入样式表和js文件 <script src="__PUBLIC__/bootstrap/js/jquery-1.11.2.min.js"& ...