本文小編為大家詳細介紹“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中讓元素居中的方法有哪些
文章出自：http://www.2m8n56k.cn/article46/ijcchg.html

成都網站建設公司_創新互聯，為您提供定制開發、手機網站建設、網站導航、品牌網站設計、動態網站、企業建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯