html+CSS--水平居中设置（定宽块状元素）

Posted 2020-07-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+CSS--水平居中设置（定宽块状元素）相关的知识，希望对你有一定的参考价值。

来源：http://www.imooc.com/code/4336

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

这种水平居中的方法两个条件缺一不可，若是将width:200px；删掉，就不能居中显示了。

以上是关于html+CSS--水平居中设置（定宽块状元素）的主要内容，如果未能解决你的问题，请参考以下文章