html中div居中

在HTML中让div居中的方法有多种。其中一种方法是给div引入一个CSS样式，然后添加自动居中的代码【margin: 0 auto;】。通过设置外边距的左右为auto，可以实现div的水平居中。此方法适用于Windows10系统、HTML5、ThinkPad T480电脑的操作环境。 [1]

另一种方法是将img元素转换为块元素，通过设置margin属性为【0 auto】实现图片的水平居中。首先需要将img元素的display属性设置为block，然后利用margin属性实现水平居中。 [2]

还有一种方法是使用display:inline-block和垂直对齐属性来实现div的居中。可以给div设置一个伪元素:after，并设置其display为inline-block和vertical-align属性为middle。然后将img元素设置为inline-block并设置vertical-align属性为middle，这样可以实现div的垂直居中。 [3]

请注意，这些方法可以根据需要选择使用，具体取决于页面的布局和需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [在html中怎么把div居中](https://blog.csdn.net/qf2019/article/details/118696705)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [html中div内容居中的方法](https://blog.csdn.net/sinat_31057219/article/details/66968204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]