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中让元素居中的方法有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。