div+css实现未知宽高元素垂直水平居中_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:25:15

Original

988 people have browsed it

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; 图片的话就用这个属性,div的话就用 display:block属性*/            display: inline;        }    </style></head><body><div class="box">    <!--<img src="0.jpg" alt=""/>-->    <div>ASDEWQ</div>    <span></span></div></body></html>

Copy after login

Related labels：

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

source：php.cn

Previous article：最锋利的Visual Studio Web开发工具扩展：Web Essentials详解_html/css_WEB-ITnose Next article：css盒子模型、文档流、相对与绝对定位、浮动与清除模型_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn