<div>是HTML中常用的元素，用于定義文檔中的一個區域或容器。在網頁布局中，經常需要將<div>元素水平居中顯示，并設置其寬度。本文將介紹如何使用CSS來實現<div>元素水平居中，并控制其寬度。
一、居中的方式 <div>元素的水平居中可以通過多種方式實現，常見的方法有：使用margin屬性、使用flex布局、使用position屬性等。下面將分別介紹這三種方法。
1. 使用margin屬性 在CSS中，我們可以使用margin屬性來設置元素的外邊距。通過設置左右外邊距為auto，可以使<div>元素在父容器中水平居中。同時，我們還需要將容器的寬度設置為一個固定的值，以確保<div>元素不會占滿整個父容器。
示例代碼：

div {
width: 200px;
margin-left: auto;
margin-right: auto;
}

這段代碼將使<div>元素在父容器中水平居中，并設置其寬度為200像素。
2. 使用flex布局 Flex布局是CSS中比較新的一種布局方式，可以方便地實現元素的居中。通過設置父容器的display屬性為flex，并使用justify-content屬性將子元素水平居中，可以實現<div>元素的水平居中。
示例代碼：

div.container {
display: flex;
justify-content: center;
}
<br>
div {
width: 200px;
}

這段代碼將使<div>元素在父容器中水平居中，并設置其寬度為200像素。
3. 使用position屬性 通過將父容器的position屬性設置為relative，然后將<div>元素的position屬性設置為absolute，并使用left和right屬性將其水平居中，可以實現<div>元素的水平居中。
示例代碼：

div.container {
position: relative;
}
<br>
div {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
}

這段代碼將使<div>元素在父容器中水平居中，并設置其寬度為200像素。
通過以上三種方法，我們可以實現<div>元素的水平居中，并設置其寬度。具體使用哪一種方法，可以根據實際情況和需求來決定。以上代碼示例僅供參考，具體的實現方式可以根據自己的需求進行調整。希望本文對您有所幫助。