欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端常见问题(水平居中和垂直居中)

程序员文章站 2023-12-31 16:40:22
先准备个测试模板 ......</div> <div class="content"> <p>先准备个测试模板</p> <div class="cnblogs_code"> <pre class="brush: css;"><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> <style> .bg{ width:100%; height:100%; position: fixed; top:0; right:0; bottom:0; left:0; background-color: lightblue; } .text{ background:#fff; border-radius: 5px; } </style> </head> <body> <div class="bg"> <span class="text">单行文字水平垂直居中</span> </div> </body> </html></pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMTcvYl8wXzIwMjAwMzE3MTYxNTMyMjYyNy5wbmc=" alt="移动端常见问题(水平居中和垂直居中)" title="移动端常见问题(水平居中和垂直居中)"></p> <p> </p> <p> </p> <p><strong>内联元素,没有设置宽高</strong></p> <p>1、自身水平垂直居中</p> <p>设置padding (左右方向有效,上下方向无效)</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMTcvYl8wXzIwMjAwMzE3MTYxNTMyMzA5OC5wbmc=" alt="移动端常见问题(水平居中和垂直居中)" title="移动端常见问题(水平居中和垂直居中)"></p> <p> </p> <p> 2、在容器内水平垂直居中</p> <p>方法一:</p> <div class="cnblogs_code"> <pre class="brush: css;"> position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);</pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMTcvYl8wXzIwMjAwMzE3MTYxNTMyNzU4My5wbmc=" alt="移动端常见问题(水平居中和垂直居中)" title="移动端常见问题(水平居中和垂直居中)"></p> <p> </p> <p> 方法二:flex布局(适合移动端)</p> <div class="cnblogs_code"> <pre class="brush: css;"> display: flex; justify-content: center; align-items: center;</pre> </div> <p> </p> <p><strong>内联块元素,没有设置宽高</strong></p> <p>1、自身水平垂直居中</p> <p>设置padding </p> <div class="cnblogs_code"> <pre class="brush: css;"> display:inline-block; padding:30px 20px;</pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMTcvYl8wXzIwMjAwMzE3MTYxNTMzMTI4Mi5wbmc=" alt="移动端常见问题(水平居中和垂直居中)" title="移动端常见问题(水平居中和垂直居中)"></p> <p> </p> <p>  2、在容器内水平垂直居中</p> <div class="cnblogs_code"> <pre class="brush: css;"> position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);</pre> </div> <p> </p> <p><strong>块元素,没有设置宽高</strong></p> <p>1、自身水平垂直居中</p> <div class="cnblogs_code"> <pre class="brush: css;"> display:block; padding:20px 0; text-align: center;</pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMTcvYl8wXzIwMjAwMzE3MTYxNTMzNDAxMS5wbmc=" alt="移动端常见问题(水平居中和垂直居中)" title="移动端常见问题(水平居中和垂直居中)"></p> <p> </p> <p> 2、在容器内水平垂直居中</p> <div class="cnblogs_code"> <pre class="brush: css;"> position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);</pre> </div> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMTcvYl8wXzIwMjAwMzE3MTYxNTMzNTk1NC5wbmc=" alt="移动端常见问题(水平居中和垂直居中)" title="移动端常见问题(水平居中和垂直居中)"></p> <p> </p> <p> 设置position为absolute,相当于把元素变为了inline-block,因此宽度没有占据整行</p> <p>如果需要的话,可以手动添加width</p> <div class="cnblogs_code"> <pre class="brush: css;"> position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%;</pre> </div> <p> </p> <p><strong>指定容器宽高,内联块</strong></p> <div class="cnblogs_code"> <pre class="brush: css;"> display:inline-block; width:200px; height:100px;</pre> </div> <p>1、自身水平垂直居中</p> <p>单行文字可以使用line-height</p> <div class="cnblogs_code"> <pre class="brush: css;"> text-align:center; line-height:100px;</pre> </div> <p>多行文字</p> <div class="cnblogs_code"> <pre class="brush: css;"> display: flex; justify-content: center; align-items: center;</pre> </div> <p>这种是将多行文字看做一个整体水平垂直居中,因此不是每一行文字都是水平居中效果</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMTcvYl8wXzIwMjAwMzE3MTYxNTMzODY4Mi5wbmc=" alt="移动端常见问题(水平居中和垂直居中)" title="移动端常见问题(水平居中和垂直居中)"></p> <p> </p> <p> </p> <p> 2、在容器内水平垂直居中</p> <div class="cnblogs_code"> <pre class="brush: css;"> position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);</pre> </div> <p>或者</p> <div class="cnblogs_code"> <pre class="brush: css;"> position: absolute; top:50%; left:50%; margin-left:-100px; margin-top:-50px;</pre> </div> <p> </p> <p><strong>指定容器宽高,块元素</strong></p> <p>1、自身水平垂直居中</p> <p>单行文字</p> <div class="cnblogs_code"> <pre class="brush: css;"> display:block; width:200px; height:100px; text-align:center; line-height:100px;</pre> </div> <p>多行文字</p> <div class="cnblogs_code"> <pre class="brush: css;"> display: flex; justify-content: center; align-items: center;</pre> </div> <p> </p> <p>2、在容器内水平垂直居中</p> <div class="cnblogs_code"> <pre class="brush: css;"> position: absolute; top:50%; left:50%; margin-left:-100px; margin-top:-50px;</pre> </div> <p>或者</p> <div class="cnblogs_code"> <pre class="brush: css;"> position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);</pre> </div> <p>如果单纯水平居中,可以控制margin</p> <div class="cnblogs_code"> <pre class="brush: css;"> margin:0 auto;</pre> </div> <p> </p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/.html"> </a> </p> <p> 下一篇: <a href="/article/.html"> </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2323560.html" target="_blank" title="移动端常见问题(水平居中和垂直居中)"> <h2> 移动端常见问题(水平居中和垂直居中) </h2> </a> </li> <li> <a href="/article/2301612.html" target="_blank" title="HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose"> <h2> HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose </h2> </a> </li> <li> <a href="/article/754716.html" target="_blank" title="HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose"> <h2> HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose </h2> </a> </li> <li> <a href="/article/327879.html" target="_blank" title="移动端常见问题(水平居中和垂直居中)"> <h2> 移动端常见问题(水平居中和垂直居中) </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>