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. .TextOut文字保存为图片

    //Canvas.TextOut文字保存为图片 //Delphi开发案例精选,使用TextOut在画布上画图procedure TForm1.Button1Click(Sender: TObject) ...

  2. Google stuff

    Google Pro Tip: Use Back-of-the-envelope-calculations to Choose the Best Design - High Scalability - ...

  3. [设计模式1]--单例模式(SINGLETON)

    搞笑解释: 俺有6个漂亮的老婆,她们的老公都是我,我就是我们家里的老公Sigleton,她们只要说道“老公”,都是指的同一个人,那就是我 定义: 单例模式确保某一个类只有一个实例,而且自行实例化并向整 ...

  4. rem移动端适配

    rem作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The f ...

  5. Centos 7中 vim 中文乱码

    参考:http://www.myexception.cn/operating-system/1534005.html 一. sudo vim /etc/vimrc 在文件中加入如下几行:      s ...

  6. PHP之数组函数归类

    数组之所以强大,除了本身声明.存储方式灵活,它还有坚强后盾:一系列功能各异的数组处理函数.就像一只军队,除了领队将军本身能征善战,指挥英明之外,还有一群不怕死.忠实于他的士兵,这样才能显得整体的强大. ...

  7. 【转】MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作

    [转]MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作 上一篇博文MyBatis学习总结(一)——MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据, ...

  8. 支持状态对象复用的RPC框架——SnakeRPC

    SnakeRPC是我2年前(春节期间!)做的一个RPC框架,现与大家分享. 设计SnakeRPC的主要动机是,Hessian返回的状态对象(如:数据库连接对象.文件对象等)无法复用,而且它对Strea ...

  9. Activiti从当前任务任意回退至已审批任务

    http://www.verydemo.com/demo_c161_i143918.html import java.util.HashMap; import java.util.Iterator; ...

  10. Orchard 学习-安装Orchard

    前段时间使用一个ABP的框架进行了一个简单CMS开发.但感觉自己开发CMS不够灵活和通用,所以还是学习一下Orchard.学习的第一步,阅读官方的文档.由于是英文,所以我对其进行了翻译和记录,方便自己 ...