css实现垂直居中_html/css_WEB-ITnose
在一次次笔试，一次次的面试中，问到垂直居中的问题太多太多，但是我每一次回答，都好像都不能让面试官太满意，今天特意花点时间，整理一下css垂直居中问题。
1、如果是单行文本。看代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ width: 500px; height: 500px; background: gray; } #wrapper p{ line-height: 500px;//行高=父级的height，垂直居中。 text-align: center;//水平居中 } </style></head><body><div id="wrapper"> <p>这是一段要垂直水平居中的文字！</p></div></body></html>
效果如图：
说明：适用于单行文本，多行就不可以了！
2、对于已知高度的块级元素，可以采用绝对定位。看代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ position: relative;//父级 width: 500px; height: 500px; background: gray; } #wrapper p{ position: absolute;//子级用绝对定位 top:50%;//先定位到50%的位置 height: 300px;//已知的高度 margin-top: -150px;//往上提本身高度的一半 } </style></head><body><div id="wrapper"> <p>这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！</p></div></body></html>
效果如图:
适用：绝对定位为页面布局没有影响的情况下可以使用，并且子级的高度是已知的。
3、对于已知子级元素的高度，而且不能用绝对定位来布局的情况，看代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ background: gray; width: 500px; height: 500px; text-align: center; overflow: hidden; } #null{ width: 100%; height: 50%; background: yellow; } #content { height: 100px; margin: -50px; } </style></head><body><div id="wrapper"> <div id="null"></div> <div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div></div></body></html>效果如图：
适用：对于绝对布局有影响，不能适用position:absolute的元素，可以用以上这种方法，思路是：用一个块级元素，设置已知大小，在让其高度达到父级容器的一半大小，再把要居中的元素往上提半个高度。跟方法2同理。
4、垂直居中一张图片（行内元素）。看代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ width: 800px; height: 800px; background: gray; text-align: center; } #wrapper img{ vertical-align: middle; } #wrapper #block{ background: blue; height: 100%; width: 0; } </style></head><body><div id="wrapper"> <img src="/static/imghw/default1.png" data-src="http://img0.bdstatic.com/img/image/2016ss1.jpg" class="lazy" alt=""> <img id="block" alt="css实现垂直居中_html/css_WEB-ITnose" ></div></body></html>
效果如图：
看到这里，细心的同学可能会发现：
这里的多了一个空的标签，为什么要这样的，首先，要搞清楚vertical-align这个属性的特点，它是相对兄弟级行高（line-height）来定位，它是相对兄弟级行高（line-height）来定位，它是相对兄弟级行高（line-height）来定位（重要事情说三遍），并且他仅对行内元素有效，所以，在要定位的元素后面加多一个行内元素img来撑开父级的行高，以此来居中。然后必须强调你一点，记得把后面img的src=""这个空属性去掉，不然会留下一个空白框。如图：
然后，有些同学可能会有疑问，行内元素那么多。为什么你要用标签呢！？
嗯嗯，也可以用其他行内元素，这里我用来试一试给大家看：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ width: 800px; height: 800px; background: gray; text-align: center; } #wrapper img{ vertical-align: middle; } #wrapper #block{ background: blue; line-height: 800px;//跟父级一样高 } </style></head><body><div id="wrapper"> <img src="/static/imghw/default1.png" data-src="http://img0.bdstatic.com/img/image/2016ss1.jpg" class="lazy" alt=""> <span id="block"></span></div></body></html>
这样的效果是一样的，记得哦，在这里不可以用line-height:100%这样来设置行高，详情可以查看我的另外一个博客“line-height:150%和line-height:1.5的区别”，了解一下line-height用百分比的特性。
适用：通用行内元素。
5、子父级都未知高度的块级元素居中，看代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ display: table; background: gray; width: 500px; height: 500px; text-align: center; } #content { display: table-cell; vertical-align: middle; } </style></head><body><div id="wrapper"> <div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div></div></body></html>效果如图：
适用：低版本的IE67不兼容，还有就是即便父级overflow：hidden,随着文本的增加，溢出的文本依旧不会隐藏，适用于少文字或者静态文字。
6、绝对定位居中法，看代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ position: relative; background: gray; width: 800px; height: 800px; } #content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin:auto; } </style></head><body><div id="wrapper"> <img src="/static/imghw/default1.png" data-src="http://img0.bdstatic.com/img/image/2016ss1.jpg" class="lazy" id="content" alt=""></div></body></html>效果如图：
首先，先感谢一下评论下方的@ 唯利是图 园友，感谢他的提醒。我尝试了这种绝对定位的方法，果然很好用。但是其原理是什么呢？
在这里，我先说一下这种定位方法的优点，可以无视被居中元素的宽度和高度，从而实现绝对定位的居中。我们来看看里面的代码，
这是什么意思呢？
其实就是将元素未知的宽度高度的元素，使其让它的top,bottom,left,right,都与父级的距离为零，如果其元素宽高不够的，就会用margin:auto去填充其大小。
从而实现了居中。
（这是本人的粗略理解，不一定准确!）
文章说明：个人查看各种资料，原创所得，观点不一定准确，欢迎各路大牛勘误，小女子感激不尽。
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
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
Mar 04, 2025 pm 12:32 PM
Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,
Bagaimana cara menambah kesan strok kepada imej PNG di laman web?
Mar 04, 2025 pm 02:39 PM
Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol
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.
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; 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; 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 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
