二、使用 text-align: center 居中

使用 text-align: center; 可以在CSS中实现内联元素的水平居中。这个技术利用了CSS的 text-align 属性，通过对元素的文本对齐方式进行调整来实现居中效果。注：只展示主要代码。

三、使用 margin: 0 auto 居中

要将块级元素水平居中，可以使用 margin 属性将左右边距设置为 auto。

.container {
   width: 300px; /* 设置容器的宽度 */
   margin: 0 auto; /* 水平居中 */
}

四、使用 Flexbox 居中元素

Flex 弹性布局，通过将容器的 display 属性设置为 flex，并使用 justify-content 和 align-items 属性分别进行水平和垂直居中设置，元素将在容器中居中显示。

.container {
   display: flex;
   justify-content: center; /* 水平居中 */
   align-items: center;     /* 垂直居中 */
} 

Flexbox 还提供了其他属性，如 flex-direction、flex-wrap、align-content 等，可以根据具体需求进行进一步的布局调整。使用 Flexbox 可以轻松实现各种居中效果，并且具有很好的浏览器兼容性。

五、使用 Grid 居中元素

网格布局 Grid 是另一种强大的布局模型，也可以用于实现元素的居中布局。通过将容器的 display 属性设置为 grid，并使用 place-items 属性设置为 center，元素将在容器中居中显示。

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

在上面的代码示例中，place-items: center是水平和垂直居中，如果只想水平居中可以用justify-items: center。如果只想垂直居中可以用 align-items: center。

六、使用定位和负边距居中

首先将容器的左边距设置为50%（相对于父容器），然后使用transform: translateX(-50%);将元素向左平移50%的宽度，从而实现了水平居中。

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

下面是水平和垂直居中的示例。

.container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
} 

.container {
   width: 300px;
   margin-left: calc(50% - 150px);
   margin-right: calc(50% - 150px);
   /* background-color: blue; */
} 

.container {
   height: 400px;
   margin-top: calc(50vh - 200px);
   margin-bottom: calc(50vh - 200px);
} 

.container {
   display: table;
   width: 100%;
}
.content {
   display: table-cell;
   text-align: center;
}

<div class="container">
   <div class="content">
     <div>检测居中效果</div>
     <p>检测居中效果</p>
     <input type="text" value="检测居中效果">
   </div>
</div>