css設置div居中的方法:1.創建html文件;2.添加html架構代碼到html文件中;3.在body標簽中使用div標簽設置div盒子;4.添加style標簽并給div設置居中樣式;5.通過瀏覽器方式查看設置效果。
具體操作步驟:
1.首先創建一個html文件。
2.將html架構代碼添加到html文件中。
<!DOCTYPE html><html>
<head>
<title>div居中</title>
</head>
<body>
</body>
</html>
3.在html架構中的body標簽里面使用div標簽設置一個div盒子。
<div>定寬塊狀元素水平居中</div>
4.在html架構中的html標簽里面添加style標簽并設置css居中樣式。
<style>div{
border:1px solid red;
width: 200px; /*定寬*/
margin:20px auto; /*margin-left 與 margin-right 設置為 auto*/
}
</style>
5.最后可通過瀏覽器方式閱讀html文件查看設置效果。
完整示例代碼:
<!DOCTYPE html><html>
<head>
<title>div居中</title>
</head>
<style>
div{
border:1px solid red;
width: 200px; /*定寬*/
margin:20px auto; /*margin-left 與 margin-right 設置為 auto*/
}
</style>
<body>
<div>定寬塊狀元素水平居中</div>
</body>
</html>