CSS居中大作战：如何在面试中轻松击败元素居中问题

让一个元素居中并不难,但是如果面试官让你聊一聊元素居中,知道的方法多一些,面试的时候也更从容一些,本文就将总结常见的元素居中方法

元素类型

我们先来了解一下元素的类型。在HTML中，元素可以被分类为三种主要类型：块级元素、行内元素和行内块元素。这些类型决定了元素在文档流中的表现方式以及它们之间的默认布局特性。

1. 块级元素（Block-level Elements）:

   • 定义： 块级元素通常会在页面上创建一个块状的盒子，每个块级元素都会独占一行，并且垂直方向上会有一定的间距。
   • 例子： <div>, <p>, <h1> - <h6>, <ul>, <ol>, <li>, <table>, <form> 等。

2. 行内元素（Inline Elements）:

   • 定义： 行内元素不会在页面上创建新的块，它们只会在内容中进行标记，并且在同一行内尽量排列。
   • 例子： <span>, <a>, <strong>, <em>, <img>, <br>, <input> 等。

3. 行内块元素（Inline-Block Elements）:

   • 定义： 行内块元素具有行内元素的特性，但同时可以设置宽度、高度以及边距，即具备块级元素和行内元素的特点。
   • 例子： <span> (当设置为 display: inline-block; 时)、<img>, <input> (当设置为 display: inline-block; 时) 等。

4. 边距

• 外边距（Margin）：

  • 对于块级元素，可以设置上下左右四个方向的边距，例如：margin-top, margin-bottom, margin-left, margin-right。
  • 对于行内元素，只有左右方向的边距会生效，即 margin-left 和 margin-right。但是值得注意的是，行内元素的外边距只会影响到左右方向的空间分配，而不会改变元素的位置。
  • 行内块级元素的边距表现类似块级元素。

• 内边距（Padding）：

  • 对于块级元素，可以设置上下左右四个方向的内边距，例如：padding-top, padding-bottom, padding-left, padding-right。
  • 对于行内元素，上下方向的内边距（padding-top 和 padding-bottom）通常不会生效，左右方向的内边距会生效。
  • 行内块级元素的内边距表现类似块级元素。 在CSS中，可以通过display属性来控制元素的类型，例如：

.block-level {
    display: block;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

居中方法

1.text-align：center

.parent{
text-align：center;
}

适用于行内 ,行内块级元素的水平居中

2. margin

.son{
    margin： 0 auto;
}

margin： 0 auto适用于块级,行内块级元素的水平居中

.son{
   margin-left: calc(50% - 50%更换文字为自身宽度);
  /* margin-right: calc(50% -50%更换文字为自身宽度);*/
}

margin-left: calc(50% - 50%自身宽度); 或者是 margin-right: calc(50% -50%自身宽度);,适用于适用于块级 ,行内块级元素的水平居中

那么看到这里有的友友就会问了margin: auto 0 ; 和margin-top: calc(50% -50%自身宽度)是不是能实现垂直居中呢

水平和垂直居中的机制在CSS中是不同的。水平居中可以通过设置外边距为"auto"来实现，因为这会导致浏览器自动将左右外边距分配相等的空间，从而使元素水平居中。

而垂直居中的方式则更复杂，因为在传统的CSS中，垂直居中需要考虑容器的高度，元素的高度等因素。因此，简单地通过设置上下外边距为"auto"并不能实现垂直居中。

而上述的calc()函数中的第一个50%相对于父容器,但是该函数获取不了父容器的高度所以也无法实现在父容器中的垂直居中

综上所述:平常使用还是更推荐margin： 0 auto,简单易懂

3 . flex布局

适用于各种元素的水平垂直居中(主轴方向默认),将父容器设置为弹性,再设置居中方式

水平居中:元素在主轴方向居中

.parent{
    display:flex;
    justify-content:center ;
}

垂直居中:元素在副轴方向居中

.parent{
    display:flex;
    align-items:center ;
}

4 . grid 布局

适用于各种元素的水平垂直居中

初始布局没有居中:

.parent {
        /*grid布局*/
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        
        /*其他样式*/
        margin: 0 auto;
        width: 80%;
        height: 40vh;
        background-color: #e0e0e0;
       
      }
      .son {
        height: 100px;
        width: 100px;
        background-color: #882b2b;
      }

使用样式居中后:

justify-items: center;是水平居中

align-items: center;是垂直居中

place-items: center; 是水平垂直居中

.parent {
        /*grid布局居中*/
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        justify-items: center;
        align-items: center; 
        
        /*其他样式*/
        margin: 0 auto;
        width: 80%;
        height: 40vh;
        background-color: #e0e0e0;
      }
.son {
        height: 100px;
        width: 100px;
        background-color: #882b2b;
      }

5. 绝对定位+负边距

父容器相对定位,子容器绝对定位

定位之后使用平移:

水平居中

.parent{
postion:relative;
}
.son{ 
position: absolute; 
left: 50%; 
transform: translateX(-50%); 
}

left: 50%; 中的50%表示的是相对于父容器的宽度,transform: translateX(-50%);的50%是自身的宽度

垂直居中

.parent{
    postion:relative;
}
.son{ 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
 }

定位之后使用外边距:

水平居中

.son { 
position: absolute; 
left: 50%; 
margin-left:-50%
}

垂直居中

.son{ 
position: absolute; 
top: 50%; 
margin-top:-50%
}

margin-left margin-top这里外边距的减少是按照其绝对定位之后的位置基础上,减去多移动的自身的宽度/高度,实现居中

6. table布局(少)

通过将父容器设置display:table,将外面的包裹容器设置为display:table-cell,通过 vertical-align: middle;垂直居中。

.parent {
        width: 40vh;
        height: 40vh;
        background-color: #c47e7e;
        margin: 0 auto;
        display: table;
      }
      .son {
        width: 100px;
        height: 100px;
        background: #dcb9b9;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

<div class="parent">
  <div class="son">单元格内容</div>
</div>

在满足特定条件或要求兼容性保证时，display: table 方式依然保留了一定的实用价值。不过，在能使用Flexbox或Grid的情况下，应当优先考虑这两种现代布局模式。

总结

1. 使用text-align: center;适用于行内和行内块元素的水平居中。
2. 使用margin: 0 auto;适用于块级和行内块级元素的水平居中，以及通过calc()函数进行微调。
3. 使用Flex布局，通过justify-content实现水平居中，通过align-items实现垂直居中。
4. 使用Grid布局，通过设置justify-items和align-items实现元素的水平和垂直居中。
5. 使用绝对定位和负边距的方法，包括水平和垂直居中。
6. 使用table布局，通过设置display: table和display: table-cell实现元素的水平和垂直居中。

本人还在学习中，水平有限，文章可能存在纰漏或错误，如有问题欢迎指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝事业有成,生活愉快！😘