Heim >Web-Frontend >HTML-Tutorial >div+css实现未知宽高元素垂直水平居中_html/css_WEB-ITnose
div+css实现未知宽高元素垂直水平居中_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:25:15989Durchsuche
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：最锋利的Visual Studio Web开发工具扩展：Web Essentials详解_html/css_WEB-ITnoseNächster Artikel：css盒子模型、文档流、相对与绝对定位、浮动与清除模型_html/css_WEB-ITnose