Css中关于水平居中那点事

       前两天一个同事在写页面的时候随口问了我个小问题，如何将一个按钮水平居中，我脱口而出，直接text-align: center啊，旁边一个同事说，那不是文字居中吗？我没细想，然后再说，那要不margin: 0 auto;？然而试了下不生效...我说要不再在外面包一层，直接用flex吧，他又嫌太麻烦，结构已经包太多层了。后面我回到工位上自己试了下。真实丢人啊，开发几年却在这个小小的居中上还讨论半天。哎，平时还是没注意细节，这次就好好整理下关于实现水平居中的方案，这里也做个记录。

1.使用 text-align: center;

这将使得所有的行内元素（如 <span>、<a> 等）和文本在其父元素内水平居中,也就是说这个属性是写在父元素里面的。话说回来，其实那个问题我一开始是答对的，因为按钮是行内标签，可以直接用这个属性，这也是部分人没分清，以为这个属性只针对“文字”，其实并不是，只要是行内元素都可以。

.parent{
  text-align: center;
}

2.使用 margin: 0 auto;

这个属性是针对子元素是块级(block)元素的，比如（<div>，<p>，）,但注意的点是：我们要给子元素添加宽度。

//子元素
.child{
  width: 60px;//宽度自己定
  margin: 0 auto;
}

3.使用Flexbox

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

使用flex弹性布局，这个没啥好说的，基本操作。

4.使用Grid 

.parent {
  display: grid;
  justify-content: center;水平居中
 // place-items: center;//水平垂直居中
}

使用网格布局，实现水平居中，跟flex大同小异。

5.使用display: inline-block

.parent{
  text-align: center;
}
.child {
  display: inline-block;
}

将元素设置为行内块元素（display: inline-block），并通过  text-align: center 实现水平居中。

6. 使用绝对定位和负边距

.child {
  position: absolute;
  width: 200px; //必须设置宽度
  left: 50%;
  margin-left: -100px; // 负的宽度一半
}

对于已知宽度的元素，可以使用绝对定位，并将元素的 left 属性设置为 50%，然后使用负边距将元素向左移动其宽度的一半。

7.使用绝对定位和 transform

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

这种方法不需要知道元素的宽度，适用于未知宽度的元素。

8.使用 calc()

.child {
  width: 200px; // 必须设置宽度
  margin-left: calc(50% - 100px); // 50% - (宽度的一半)
}

使用 calc() 函数计算元素的左边距，使其居中。

9.使用 display: table 和 margin: auto

.child {
  display: table;
  margin: 0 auto;
}

这种方法将元素作为表格单元格（display: table-cell）处理，并通过 margin: auto 实现居中。

10.使用 display: table-cell 和 text-align

.parent {//父元素
  display: table;
  width: 100%;
}
.child {//子元素，只能有一个子元素，才能实现居中
  display: table-cell;
  text-align: center;
}

将父元素设置为 display: table，然后将子元素设置为 display: table-cell 并使用 text-align: center。但注意的是：子元素个数只能为1个，若多个子元素，则会一块分配空间。