div+css实现未知宽高元素垂直水平居中。很多同学在面试的时候都会遇到这样的问题：怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中？？如果用JS的话就好办了，但是JS的使用会对页面性能造成影响，而且能用CSS实现的干嘛用JS呢，嘿嘿

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>div+css实现未知宽高元素垂直水平居中</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 1120px;

            height: 968px;

            text-align: center;

            background: #eaeaea;

        }

        .box span {

            display: inline-block;

            height: 100%;

            vertical-align: middle;

        }

        .box div {

            background: #ccc;

            vertical-align: middle;

            display: inline-block;

        }

        /*.box img{*/

            /*vertical-align: middle;*/

            /*display: inline;*/

        /*}*/

    </style>

</head>

<body>

<div class="box">

    <!--<img src="0.jpg" alt=""/>-->

    <div>
　　　　<p>ASDEWQ</p>
　　　　<p>ASDEWQ</p>
　　　　<p>ASDEWQ</p>
　　　　<p>ASDEWQ</p>
　　</div>

   <span></span>

</div>

</body>

</html>

div+css实现未知宽高元素垂直水平居中的更多相关文章

  1. CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

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

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

  3. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  4. 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  5. css/css3实现未知宽高元素的垂直居中和水平居中

    题目:.a{ width: 200px; height: 200px; background-color: #ccc;} <body> <div class="a" ...

  6. css实现未知元素宽高垂直居中和水平居中的方法

    第一种:display:table-cell的方式 .container { /*父级容器*/ display:table-cell; text-align:center; vertical-alig ...

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

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

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

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

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

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

随机推荐

  1. c++ 操作注冊表

    1.       注冊表简单介绍 注冊表是为Windows NT和Windows95中全部32位硬件/驱动和32位应用程序设计的数据文件,用于存储系统和应用程序的设置信息.16位驱动在Winnt (W ...

  2. ios开发——实用技术篇&网络音频播放

    网络音频播放 在日常的iOS开发中,我们通常会遇到媒体播放的问题,XCode中已经为我们提供了功能非常强大的AVFoundation框架和 MediaPlayer框架.其中AVFoundation框架 ...

  3. AIR 移动设备上的存储控制

    File.documentsDirectory, File.userDirectory, File.desktopDirectory 等.可以保存大的数据,如图片,视屏,和临时文件.访问这些文件的全选 ...

  4. 探索高效jQuery的奥秘

    讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...

  5. python--判断数据类型可不可变

    内存是一块空间,可以比喻成一个比较大的房子,定义一个变量就是在大房子中建立一个小房子,判断一个数据类型可不可变,就是看在这个这个大房子中有没有新建小房子,可以通过id来判断,如果id没有变化则是不可变 ...

  6. kali Linux 文本图形界面切换遇到的怪问题

    前段装了在Virtual Box上装一个Kali Linux玩,然后设为了开机进入文本界面,后来遇到无法上网的问题,网上找到解决方法,说是NAT地址转换和host-only双网卡顺序问题,按照网上的说 ...

  7. [转]在.Net中使用Oracle的表类型和对象类型

    本文转自:http://www.cnblogs.com/studyzy/archive/2010/10/13/1850161.html 在一般的数据存取操作过程中,如果要对一个主表和对应的子表进行插入 ...

  8. [转]How to: Execute Oracle Stored Procedures Returning RefCursors

    本文转自:http://www.telerik.com/help/openaccess-orm/openaccess-tasks-oracle-execute-sp-result-set.html I ...

  9. Linux下mplayer源代码安装方法

    http://www.linuxidc.com/Linux/2007-08/6820.htm 1下载安装mplayer需要的各种软件 去这里下载http://www.mplayerhq.hu/MPla ...

  10. Ubuntu 14.04 & ant: Unable to locate tools.jar. Expected to find it in /usr/lib/jvm/java-7-openjdk-i386/lib/tools.jar

    当我在vagrant + ubuntu 14.04,jenkins ant执行项目的build.xml时,提示: [workspace] $ ant -file build.xml Unable to ...