这篇文章主要介绍了HTML中怎么设置块状元素水平居中的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML中怎么设置块状元素水平居中文章都会有所收获，下面我们一起来看看吧。

1、通过定义块状元素宽度和设置margin:20pxauto;来实现居中（块状元素中的文字不会居中，如果要居中我们可以在div样式设置中添加text-align:center;来实现块状元素水平居中，在代码中我们使用内联式书写css样式）代码结果如下：

<html><head><metacharset="utf-8"><title>HTML中如何设置水平居中步骤方法</title><styletype="text/css">div{border:1pxsolidred;width:350px;margin:20pxauto;}</style></head><body><divid="">定义宽度的块状元素水平居中</div></body></html>

2、不定义宽度实现块状元素水平居中，我们在div标签中添加了table标签，在css样式中使用table元素来设置我们的块状元素居中，代码结果如下：

<html><head><metacharset="utf-8"><title>HTML中如何设置水平居中步骤方法</title><styletype="text/css">table{border:solid1px;margin:0auto;}</style></head><body><divid=""><table><tbody><tr><td><ul><li>第一段文本</li><li>第二段文本</li><li>第三段文本</li></ul></td></tr></tbody></table></div></body></html>

3、不定宽块状元素，通过改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中；代码结果如下：

<html><head><metacharset="utf-8"><title>HTML中如何设置水平居中步骤方法</title><styletype="text/css">#center{text-align:center;}#centerul{list-style:none;margin:0;padding:0;display:inline;}#centerli{margin-right:8px;display:inline;}</style></head><body><divid="center"><ul><li><ahref="#">W3cschool</a></li></ul><ul><li>W3cschool</li></ul></div></body></html>

关于“HTML中怎么设置块状元素水平居中”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML中怎么设置块状元素水平居中”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。