简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

调整窗口大小也能够实现div水平垂直居中代码实例_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 11:29:19
Original
1145 Leute haben es durchsucht

调整窗口大小也能够实现div水平垂直居中代码实例:
将一个div在窗口内实现居中效果，基本上没有什么难度，具体可以参阅CSS实现div屏幕居中效果代码一章节。 
但是有时候我们可能会有这样的需求，就是在调整窗口大小的情况下也能够实现div垂直水平居中效果，下面通过代码实例做一下简单介绍,代码如下:

 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title>  <style type="text/css">*{  margin:0px;  padding:0px;} #thediv{  width:200px;  height:100px;  background:green;  position:absolute;  left:50%;  top:50%;  margin-left:-100px;  margin-top:-50px;}</style>  </head> <body><div id="thediv"></div></body> </html>
Nach dem Login kopieren

 

上面的代码实现了我们的要求，因为div采用的是绝对定位，并且采用百分比的方式来确定div的基本位置，不是采用固定尺寸的方式，然后在使用外边距向回调整一定的距离，这样就实现了居中效果，同时调整浏览器窗口也会实现一直居中的效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14354

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Verwandte Etiketten：
调整窗口大小也能够实现div水平垂直居中代码实例
Quelle：php.cn
Vorheriger Artikel：兼容低版本IE浏览器的背景颜色渐变效果_html/css_WEB-ITnose Nächster Artikel：纯css实现的截取字符串后面添加省略号代码实例_html/css_WEB-ITnose
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
1806
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
10
1949
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1657
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1558
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1590
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！