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

本文小編為大家詳細介紹“HTML中讓元素居中的方法有哪些”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“HTML中讓元素居中的方法有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的興業(yè)網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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;

/*由于觸發(fā)了BFC規(guī)范，可以解決margin塌陷，完成垂直的居中*/

overflow: hidden;

margin: 0 auto;

}

.inner{

width: 100px;

height: 100px;

background-color: pink;

margin: 100px auto;

}

</div>

3.圖片在盒子中的居中

.box{

width: 300px;

height: 300px;

border: 1px dotted blue;

margin: 0 auto;

line-height: 400px;

text-align: center;

}

</div>

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

4.使用定位實現(xiàn)盒子的居中

.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>

5.使用flex布局實現(xiàn)居中

.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="inner">flex居中</div>

</div>

6.網(wǎng)格布局實現(xiàn)居中

.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>

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中讓元素居中的方法有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：HTML中讓元素居中的方法有哪些
文章出自：http://muchs.cn/article46/ijcchg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、手機網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計、動態(tài)網(wǎng)站、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容