移动端常见问题（水平居中和垂直居中）
程序员文章站
2022-03-25 17:53:45
先准备个测试模板 ......</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/327878.html">
WorkerMan中php后端及时推送消息给客户端 </a>
</p>
<p>
下一篇： <a href="/article/327880.html">
python基础入门之十八 —— 模块和包 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<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>