本文共 1331 字，大约阅读时间需要 4 分钟。

我们在制作网页时，常常会遇到一个问题，“我想把这个内容放在正中央显示！”，即让元素（盒子）上下左右（水平垂直）居中。

在解决这个问题之前，让我们先确定想居中的元素是行内元素还是块状元素。

如果是行内元素想要水平居中显示的话就非常简单了，只需要利用

text-align:center；

就可以实现。

如果是块状元素想要水平居中，那么又分为两种情况，定宽的和不定宽的。

定宽块状元素：块状元素的宽度width为固定值。

当我们设置定宽块状元素时，我们可以把左右margin”值设置为“auto”，而上下margin值可以根据我们的需求随意设置。

即

margin-left:auto;	margin-right:auto;

来看一段代码

   
   
    这里是一个水平居中的块状元素这里是一个水平居中的块状元素这里是一个水平居中的块状元素
   

运行结果如下

说完元素居中显示，我们重点来说一下盒子居中显示 

盒子也分为已知宽高的盒子和不定宽高的盒子

如果我们要把一个已知宽高的盒子居中显示，要利用父元素和子元素设置相对和绝对定位，再根据已知的宽高利用margin进行居中显示，来看一段代码

其中

margin:-100px 0 0 -200px;

等于

margin-top:-100px;        margin-left:-200px;

运行结果如下

 注意：定宽高的盒子不受内容多少的影响，宽高不会改变，如果我在盒子里写了非常多的字，那么就会溢出盒子，就像这样

如果我们有一段文字，想将它居中显示，那么就要用到我们的不定宽高盒子了。

不定宽高的盒子居中我们通常使用定位以及translate完成。

不定宽高的盒子居中，盒子的大小会根据内容的多少自行改变。

话不多说，来看一段代码

    
               
   
        
    
                 不定宽高的盒子居中显示。不定宽高的盒子居中显示。不定宽高的盒子居中显示。			不定宽高的盒子居中显示。不定宽高的盒子居中显示。不定宽高的盒子居中显示。			不定宽高的盒子居中显示。不定宽高的盒子居中显示。不定宽高的盒子居中显示。			不定宽高的盒子居中显示。不定宽高的盒子居中显示。不定宽高的盒子居中显示。			不定宽高的盒子居中显示。不定宽高的盒子居中显示。不定宽高的盒子居中显示。			不定宽高的盒子居中显示。不定宽高的盒子居中显示。不定宽高的盒子居中显示。			不定宽高的盒子居中显示。不定宽高的盒子居中显示。不定宽高的盒子居中显示。			不定宽高的盒子居中显示。不定宽高的盒子居中显示。不定宽高的盒子居中显示。			 
    
    
   

运行结果：

可以看到，即使我们在子盒子中放了非常多的文字，盒子的大小依然正好，因为盒子会根据内容多少自己调节大小。 

注意：但是如果父元素高度设置过小，而子元素中内容超多时，就会发生溢出现象，比如

所以我们需要根据实际需要来调整尺寸，选择合适的尺寸。 

转载地址：https://blog.csdn.net/weixin_53379398/article/details/119045639 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！