div居中的问题_html/css_WEB-ITnose
div {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0
bottom: 0;
width: 100px;
height: 100px;
border:1px solid red;
}
将产生一个div， width: 100px; height: 100px; 外边框 1px 红色实线 ；
div居于屏幕中间，对于居于中间这点，我无法理解,为何下面的做法不可以？
div {
margin: auto;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border:1px solid red;
}
回复讨论(解决方案)
问题1
top: 0;
left: 0;
为何不可以代替
top: 0;
left: 0;
right: 0
bottom: 0;
问题2
margin:auto为何不可以代替
margin: auto;
top: 0;
left: 0;
right: 0
bottom: 0;
<html> <head> <style type="text/css"> div { margin: auto; position: absolute; right: 0; bottom: 0; top: 0; left: 0; width: 100px; height: 100px; border:1px solid red; } </style> </head> <body> <div></div> </body></html>打开浏览器，改变浏览器的视区的大小，发现依然居中
因为该div设置了position为absolute，而且设置了置入值（left\right\top\bottom），根据元素包含块的定义，因为div的父级没有position为“absolute”、“relative”或者“fixed”的祖先元素，所以该div的包含块为初始包含块，即根元素html的包含块，我在控制台选中html标签的时候，可以看出整个视区都被选中，所以这个时候初始包含块就是视区
根据css2.1中‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = 包含块的高度
设置margin的属性为auto恰好填充了空白
可以在控制台看出随着视区大小变化，margin的值随之变化
问题1：
如果只有left属性和top属性 那么margin属性为auto没有起到任何的作用
只有设置了left和right，或者top与bottom的时候，margin为auto的时候才会去填充左右或者上下的空白，达到left属性0，right属性为0，top属性为0，bottom属性为0 的效果，不然div只有100*100那么大，不可能达到left为0又right为0的效果啊！只有添加margin，增大在文档流的占用空间
问题2：
同理问题1，不设置置入值（left\right\top\bottom），这个时候margin属性为auto没有起到任何的作用
<html> <head> <style type="text/css"> div { margin: auto; position: absolute; right: 0; bottom: 0; top: 0; left: 0; width: 100px; height: 100px; border:1px solid red; } </style> </head> <body> <div></div> </body></html>打开浏览器，改变浏览器的视区的大小，发现依然居中
因为该div设置了position为absolute，而且设置了置入值（left\right\top\bottom），根据元素包含块的定义，因为div的父级没有position为“absolute”、“relative”或者“fixed”的祖先元素，所以该div的包含块为初始包含块，即根元素html的包含块，我在控制台选中html标签的时候，可以看出整个视区都被选中，所以这个时候初始包含块就是视区
根据css2.1中‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = 包含块的高度
设置margin的属性为auto恰好填充了空白
可以在控制台看出随着视区大小变化，margin的值随之变化
问题1：
如果只有left属性和top属性 那么margin属性为auto没有起到任何的作用
只有设置了left和right，或者top与bottom的时候，margin为auto的时候才会去填充左右或者上下的空白，达到left属性0，right属性为0，top属性为0，bottom属性为0 的效果，不然div只有100*100那么大，不可能达到left为0又right为0的效果啊！只有添加margin，增大在文档流的占用空间
问题2：
同理问题1，不设置置入值（left\right\top\bottom），这个时候margin属性为auto没有起到任何的作用
上面描述增大在文档流的占用空间不正确，position属性为absolute已经脱离了文档流，应该是增大该div的占用空间比较准确一点
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1375
52
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?
Mar 17, 2025 pm 12:20 PM
Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?
Mar 17, 2025 pm 12:27 PM
Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.
Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?
Mar 12, 2025 pm 04:05 PM
Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
