HTML中让元素居中的方法有哪些

本文小编为大家详细介绍“HTML中让元素居中的方法有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML中让元素居中的方法有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的兴业网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

1.文字的垂直水平居中

<style>

div{

width: 200px;

height: 200px;

background-color: greenyellow;

color: white;

/*行高等于盒子的高度，完成垂直居中*/

line-height: 200px;

/*元素的水平居中*/

text-align: center;

}

</style>

<div>垂直水平居中</div>

ps:以上方法仅针对文字的水平居中

2.盒子的垂直水平居中

.outer{

width: 300px;

height: 300px;

background-color: gainsboro;

text-align: center;

line-height: 100px;

/*由于触发了BFC规范，可以解决margin塌陷，完成垂直的居中*/

overflow: hidden;

margin: 0 auto;

}

.inner{

width: 100px;

height: 100px;

background-color: pink;

margin: 100px auto;

}

<div class="outer">

<div class="inner">盒子居中</div>

</div>

3.图片在盒子中的居中

.box{

width: 300px;

height: 300px;

border: 1px dotted blue;

margin: 0 auto;

line-height: 400px;

text-align: center;

}

<div class="box">

<img src="./happy.png" alt="">

</div>

ps:图片的特殊的文本类型，所以使用普通文本的垂直水平居中方法即可完成图片的居中，需要注意图片的大小一定要小于盒子的一半，否则效果不明显。

4.使用定位实现盒子的居中

.outer{

width: 300px;

height: 300px;

background-color: #fcfdcd;

position: relative;

}

.inner{

width: 100px;

height: 100px;

background-color: #00ffcd;

text-align: center;

line-height: 100px;

position: absolute;

top: 50%;

left: 50%;

/*由于定位是以元素左上角为起始点，所以此时需要向上向左移动盒子的大小的一半*/

margin-top: -50px;

margin-left: -50px;

}

<div class="outer">

<div class="inner">定位居中</div>

</div>

5.使用flex布局实现居中

.outer{

width: 300px;

height: 300px;

background-color: #d3d60e;

display: flex;

justify-content: center;

align-items: center;

}

.inner{

color: #fff;

width: 100px;

height: 100px;

background-color: #13b86b;

text-align: center;

}

<div class="outer">

<div class="inner">flex居中</div>

</div>

6.网格布局实现居中

.outer {

width: 300px;

height: 300px;

background-color: gainsboro;

text-align: center;

line-height: 100px;

display: grid;

grid-template-columns: repeat(3,100px);

grid-template-rows: repeat(3,100px);

}

.inner {

width: 100px;

height: 100px;

background-color: pink;

}

<div class="outer">

<div></div>

<div></div>

<div></div>

<div></div>

<div class="inner">网格居中</div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

7.元素在当前浏览器中垂直水平居中

body{

background-color:gray;

}

.box {

width: 400px;

height: 300px;

line-height: 300px;

text-align: center;

background-color: orange;

position: absolute;

top: 50%;

left: 50%;

margin-left: -200px;

margin-top: -150px;

}

<div class="box">浏览器中垂直水平居中</div>

读到这里，这篇“HTML中让元素居中的方法有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

网站题目：HTML中让元素居中的方法有哪些
文章出自：https://www.cdcxhl.com/article46/ijcchg.html

成都网站建设公司_创新互联，为您提供定制开发、手机网站建设、网站导航、品牌网站设计、动态网站、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联