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. Java路径操作具体解释

    1.基本概念的理解 绝对路径:绝对路径就是你的主页上的文件或文件夹在硬盘上真正的路径.(URL和物理路径)比如: C:\xyz\test.txt 代表了test.txt文件的绝对路径.http://w ...

  2. 【Android开发】完美解决Android完全退出程序

    背景:假说有两个Activity, Activity1和Activity2, 1跳转到2,如果要在2退出程序,一般网上比较常见的说法是用 System.exit(0) 或是 android.os.Pr ...

  3. [JavaScript]'this'详解

    http://blog.csdn.net/sodino/article/details/51318565

  4. How to install VXDIAG Honda, Toyota and JLR SDD software

    EOBD2 has newly launched Allscanner VXDIAG multi diagnostic tool with OEM diagnostic software: Honda ...

  5. C++ （P103—P154）

    1 任一指针变量本身的数据值得类型都是unsigned long int 2 指针值为0的叫做空指针,为了安全起见,声明指针时最好初始化,哪怕是初始化为空指针 3 一般不能使用不同类型变量的地址来给指 ...

  6. iOS之用xib给控件设置圆角、边框效果

    xib中为各种控件设置圆角 通过代码的方式设置 @interface ViewController () @property (weak, nonatomic) IBOutlet UIView *my ...

  7. opencv里面CV_32FC1家族

    因为总是接触过这样一些#define里面的东西但是总也不知道是干什么用的.而且每看一次梦比一次. 对于这些东西到底是什么的简写根本就不能理解. 原意是跑一下这个例程的: cvRectangle( my ...

  8. java基础学习总结四(控制语句<顺序、选择、循环>、方法)

    一:结构控制语句 结构控制语句分为3种,顺序语句.选择语句.循环语句. 1:顺序语句 就是自上而下的执行程序,默认执行顺序. 2:选择语句 if结构语句:如果满足条件,则执行该语句. if...els ...

  9. 关于php正则表达式模式修饰符

    一直以来,以为自己的正则表达式学的还算可以(基本工作上遇到的问题都能解决),但有时候却是知其然而不知其所以然,在网上看到这篇文章,解释了之前的很多疑问,记录下来,随时温故而知新. i (PCRE_CA ...

  10. plot函数功能总结

    基本形式 >> y=[1 2 3 4 5 6]; >> plot(y) 生成的图形是以序号为横坐标.数组y的数值为纵坐标画出的折线. >> x=linspace(0 ...