纯CSS实现垂直居中的几种办法
垂直居中是布局中<span style="color: black;">非常</span><span style="color: black;">平常</span>的效果之一，为实现良好的兼容性，PC端实现垂直居中的<span style="color: black;">办法</span><span style="color: black;">通常</span>是<span style="color: black;">经过</span>绝对定位，table-cell，负边距等<span style="color: black;">办法</span>。有了css3，针对移动端的垂直居中就更加多样化。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">办法</span>1：table-cell ====设置父元素</strong></p><div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-c98e79a19409cdfafb0c8e426157b3fe_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-883834e727e31d4754d9bbab11773458_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><strong style="color: blue;"><span style="color: black;">办法</span>2：display:flex ====设置父元素<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-66f59f301bdb626a4531f107ea9ea842_720w.webp" style="width: 50%; margin-bottom: 20px;"></div></strong>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-a2b905cee28556055b7a0b1616f5e285_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><strong style="color: blue;"><span style="color: black;">办法</span>3：绝对定位和负边距【子元素固定宽高】===设置子元素</strong>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-cc678fca32146ef013cdedd4e69cbf54_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-d5603ff904e7156a678eaf5a2eabe847_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><strong style="color: blue;"><span style="color: black;">办法</span>4：绝对定位和0====设置子元素</strong><strong style="color: blue;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-f733c25cb541d3b4fda9ebff172886f8_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
</strong><strong style="color: blue;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-206a69d22ce536da47133e53f1681f15_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
</strong><strong style="color: blue;"><span style="color: black;">重视</span>：</strong>这种<span style="color: black;">办法</span>跟上面的有些类似，<span style="color: black;">然则</span><span style="color: black;">这儿</span>是<span style="color: black;">经过</span>margin:auto和top,left,right,bottom都设置为0实现居中，缺一不可，很神奇吧。<span style="color: black;">不外</span><span style="color: black;">这儿</span>得确定内部元素的高度，<span style="color: black;">能够</span>用百分比，比较适合移动端。<span style="color: black;">倘若</span><span style="color: black;">无</span>设置宽高，<span style="color: black;">那样</span>就默认宽高为100%；<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">办法</span>5：translate【<span style="color: black;">无</span>设置宽高】====设置子元素</strong></p><strong style="color: blue;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-ebce37ee195277ac6876812c6d1306d4_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
</strong>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-2a883751056ae8fe0df9d30b16738cfe_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这<span style="color: black;">实质</span>上是<span style="color: black;">办法</span>3的变形，移位是<span style="color: black;">经过</span>translate来实现的。<span style="color: black;">然则</span>，<span style="color: black;">办法</span>三是得写出固定的宽高，而translate的<span style="color: black;">办法</span><span style="color: black;">不消</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">办法</span>6：display:inline-block【父元素的伪类after和子元素都得设置】</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">==========</strong>display:inline-block; vertical-align:middle;</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-3390a25b22d9ee3ae2456e78c87fc825_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-d93646e9823fe56e4da5d71dd2f68558_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>这种<span style="color: black;">办法</span>确实巧妙...<span style="color: black;">经过</span>:after来占位。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">办法</span>7：display:flex和margin:auto【父元素设置flex，子元素设置margin：auto】</strong></p><strong style="color: blue;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-382910d585da6bbd2982f0bedc81ff33_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
</strong>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-d66a5d120319970ef24a77f7ec44e6fc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><span style="color: black;">重视</span>：子元素<span style="color: black;">能够</span>是display：block；<span style="color: black;">或</span>是display：inline-block;但不<span style="color: black;">能够</span>为position：absolute；父元素有<span style="color: black;">没</span>相对定位都<span style="color: black;">能够</span>。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">办法</span>8：display:-webkit-box【父元素设置】</strong></p><strong style="color: blue;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-5044cfff66e916aa5572f148faa0155a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
</strong><strong style="color: blue;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-d66a5d120319970ef24a77f7ec44e6fc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
</strong><strong style="color: blue;">总结：</strong><strong style="color: blue;">设置父元素的<span style="color: black;">办法</span>：1、</strong>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">table-cell（vertical-align:middle） 2、display:flex （justify-content:center; align-items:center;）3、<span style="color: black;">办法</span>8：display:-webkit-box【父元素设置】</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设置子元素的<span style="color: black;">办法</span>：1、绝对定位和负边距【子元素固定宽高】（left，top,margin-left,margin-top）2、绝对定位和0====设置子元素（left,bottom,right,top为0，margin：auto；五者缺一不可）3、<span style="color: black;">办法</span>5：translate【<span style="color: black;">无</span>设置宽高】====设置子元素（和<span style="color: black;">办法</span>3的区别<span style="color: black;">便是</span>，<span style="color: black;">不消</span>设置子元素<span style="color: black;">详细</span>宽高）==transform:translate(-50%,-50%);top:50%;left:50%;</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父元素和子元素都得设置1、display:inline-block【父元素的伪类after和子元素都得设置】</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">==========display:inline-block; vertical-align:middle;2、display:flex和margin:auto【父元素设置flex，子元素设置margin：auto】</p>
你说得对，我们一起加油，未来可期。 外链发布社区 http://www.fok120.com/ 你的见解独到，让我受益匪浅，非常感谢。 谷歌外链发布 http://www.fok120.com/ 你的话深深触动了我，仿佛说出了我心里的声音。
页:
[1]