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. cocos2d_x_08_游戏_FlappyBird

    终于效果图: 环境版本号:cocos2d-x-3.3beta0 使用内置的物理引擎 计时器没有加入,可參考[cocos2d_x_06_游戏_一个都不能死] 主场景 // // FlappyBirdSc ...

  2. SQL Server 性能优化3 该指数（Index）保养

    前言 之前的一篇文章介绍了索引来提高数据库的查询性能,这其实仅仅是个开始.也许假设缺乏适当的保养,索引你以前建立的,甚至成为拖累,成为帮凶下降数据库的性能. 寻找碎片 消除碎片索引维护可能是最常规的任 ...

  3. android学习日记19--四大组件之BroadcastReciver(广播接收者)

    二.BroadcastReciver(广播接收者) 1.简述 BroadcastReciver位于android.content包下,主要用于对广播消息(Intent)的过滤并响应的控件.可以理解为全 ...

  4. 定时自动同步文件，支持多文件夹同步，支持过滤文件和文件夹，解决FileSystemWatcher多次文件触发事件（源码）

    博客园里面有很多同步工具和软件,关于FileSystemWatcher类解释的也很多,但收集了很多文章后,感觉没好的方法,自己没事写了一个定时文件同步,借鉴了很多博客园朋友的东西: 上主菜: 配置文件 ...

  5. Component migration documentation

    Component migration documentation The following is a list of migration documents for components we s ...

  6. Debug 之 VS2010网站生成成功，但是发布失败

    用vs做好了网站.清理解决方案和重新生成解决方案都可以.但是发布不能成功.发布不能成功,有错误还好,郁闷的是竟然没有错误提示. 解决方法: 1.发布文件夹权限问题.重新找个地方建立一个发布文件夹即可. ...

  7. Python 基础【第六篇】字典

    1.字典定义: 字典和列表类似 只是字典标示符用的是字符而列表用的是0开始的数字,字典中每个元素对应一个值 这个元素叫做键(key)键值不能重复 value(值)可以重复 2.字典格式: 格式一: [ ...

  8. D3中path各指令的含义

    svg.append('path').attr({ id: 'mypath', d: 'M50 100Q350 50 350 250Q250 50 50 250' }) path 的指令有: 指令 参 ...

  9. 服务器的SVN项目版本较低，check out 下来后报错

    check out下来后报错提示: svn: E155036: Please see the 'svn upgrade' commandsvn: E155036: Working copy '/hom ...

  10. sql server 表变量、表类型、临时表

    sql server 中临时表分为会话临时表和永久临时表.会话临时表在会话结束后自动被删除,永久临时表与基本表的使用上基本无差异,需要显示调用drop将其删除. 创建临时表 创建会话临时表 creat ...