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中讓元素居中的方法有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。