<style type=“text/css”>

    #vc { display:table; background-color:#C2300B; width:500px; height:200px; overflow:hidden; margin-left:50px; _position:relative; }

    #vci { vertical-align:middle; display:table-cell;  _position:absolute; _top:50%; }

    #content { margin: 0 auto; width: 580px; _position:relative; _top:-50%;  }

    </style>  

    <div id=“vc”>
　　　　<div id=“vci”>
　　　　　　<div id=“content”>

    　　　　　　我们垂直居中了，我们水平居中了

    　　　　</div>
　　　　</div>
　　</div>

上下左右居中 无固定高的div的更多相关文章

  1. div层上下左右居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝ ...

  3. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  4. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  5. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  6. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. div上下左右居中几种方式

    1.绝对定位(常用于登录模块)备注:前提条件div需要有宽高 #html <div class="box"></div> #css .box{ positi ...

  8. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  9. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

随机推荐

  1. 一文看懂JS继承

    继承是OOP中大家最喜欢谈论的内容之一,一般来说,继承都两种方式:接口继承和实现继承而JavaScript中没有接口继承需要的方法,因此只能依靠实现继承.在讲继承的实现之前,我们首先来回顾一下什么是继 ...

  2. C 语言 基础篇

    1.机器语言 2.汇编语言 3.高级语言:C.C++.Java(基于虚拟机) C语言开发:Unix,Linux,Mac OS,iOS,Android,Windows,Ubuntu 开发环境:visua ...

  3. 【LEETCODE】68、动态规划，medium级别，题目：95、120、91

    package y2019.Algorithm.dynamicprogramming.medium; /** * @ProjectName: cutter-point * @Package: y201 ...

  4. android studio下 library打包文件（.aar）和本地引用

    关键点: 利用Gradle发布本地maven库支持android library 打包文件(*.aar) 的本地引用 开发环境: windows7 64位操作系统 android studio0.5. ...

  5. pytest_allure2 生成html报告

    前言      allure是一个report框架,支持java的Junit/testng等框架,当然也可以支持python的pytest,也可以集成到Jenkins上展示高大上的报告界面. 环境准备 ...

  6. (转)微服务_创建一个简单的Eureka注册中心

    原文地址:https://www.cnblogs.com/lplshermie/p/9105329.html 微服务和分布式已经成了一种极其普遍的技术,为了跟上时代的步伐,最近开始着手学习Spring ...

  7. CSS-宽度自适应和浏览器兼容笔记

    自适应 宽度自适应:网页元素根据窗口或子元素自动调整宽度 适用百分比进行设置,例如:100% 铺满:50% 占据一般宽度 块元素如果不设置宽度,默认为100% 自适应中可以设置最大或者最小宽度和高度 ...

  8. Android Studio 打包生成apk

    打开AndroidStudio,并且打开想要生成apk文件的项目  点击工具栏上面的“Builder”  点击“Builder”之后在下拉菜单里面可以看到“Genarate Singed APK”,点 ...

  9. MVC、MVP及MVVM之间的关系

    介绍 写这篇随笔完全是为了加深自己的印象,毕竟写比看能获得得更多,另外本人对这三种模式的认识还是浅薄的,有待在以后的工作学习中有更深入的理解,因此不免会有误解,这里推荐大家阅读廖雪峰关于MVVM的介绍 ...

  10. SparkSQL之dataframe写入mysql报错

    一.异常情况及解决方案 在使用Spark SQL的dataframe数据写入到相应的MySQL表中时,报错,错误信息如下: 代码的基本形式为: df.write.jdbc(url, result_ta ...