> 웹 프론트엔드 > HTML 튜토리얼 > div+css实现未知宽高元素垂直水平居中_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:25:15
원래의
988명이 탐색했습니다.

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>
로그인 후 복사

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿