css設(shè)置div居中的方法是什么

發(fā)布時(shí)間：2022-12-13 10:08:30 來源：億速云閱讀：103 作者：iii 欄目：開發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“css設(shè)置div居中的方法是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css設(shè)置div居中的方法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

具體操作步驟：

1.首先創(chuàng)建一個(gè)html文件。

2.將html架構(gòu)代碼添加到html文件中。

<!DOCTYPE html>
<html>
<head>
<title>div居中</title>
</head>
<body>
</body>
</html>

3.在html架構(gòu)中的body標(biāo)簽里面使用div標(biāo)簽設(shè)置一個(gè)div盒子。

<div>定寬塊狀元素水平居中</div>

4.在html架構(gòu)中的html標(biāo)簽里面添加style標(biāo)簽并設(shè)置css居中樣式。

<style>
div{
border:1px solid red;
width: 200px;    /*定寬*/
margin:20px auto;   /*margin-left 與 margin-right 設(shè)置為 auto*/
}
</style>

5.最后可通過瀏覽器方式閱讀html文件查看設(shè)置效果。

完整示例代碼：

<!DOCTYPE html>
<html>
<head>
<title>div居中</title>
</head>
<style>
div{
border:1px solid red;
width: 200px;    /*定寬*/
margin:20px auto;   /*margin-left 與 margin-right 設(shè)置為 auto*/
}
</style>
<body>
<div>定寬塊狀元素水平居中</div>
</body>
</html>

讀到這里，這篇“css設(shè)置div居中的方法是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

css設(shè)置div居中的方法是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽