CSS 盒子剧中的方法！

1、第一种方法 -- 父相子绝

效果图如下、

代码解释如下:

  父: 

    position: relative; 设置父元素的位置模式为相对定位

     子:

           元素使用绝对定位position: absolute;

并且子元素设置四个方向为0 让margin:auto让子元素剧中自适应 (垂直水平居中)

2、第二种方法 -- 弹性盒子 -- Flexbox 方法（CSS3现代使用高！）

效果图如下、

代码解释如下、

  display: flex; 开始弹性盒子模式

  justify-content:center;   子元素水平居中 

 align-items:center;   子元素垂直居中 

Flexbox 方法属于 CSS3 的弹性盒子布局（Flexible Box Layout）。Flexbox 是一种一维布局模型，旨在提供更灵活和高效的方式来对齐、对齐和分布空间中的项目。它特别适合用于创建复杂的响应式布局，而无需依赖传统的浮动或定位技术

3、第三种方法 --margin     

效果图如下、

代码解释如下、

margin属性：

margin 属性用于设置元素周围的外边距，即元素与其他元素之间的间距

 margin这种方法使用不是很推荐   (前提必须知道盒子高宽度）

了解盒子高度&宽度的情况下算出需要margin的距离完成垂直水平居中

额外小提示(margin外边距)、

margin 属性可以接受一个或多个值，具体取决于你希望如何设置外边距

 1个值为上下左右都有（四个方位）

 2个值为上下和左右 （2个方位）

 3个值为 上 、左右 下 (三个方位)

 4个值为 上、右、下、 左 (四个方位 提示:顺时针记)

4、第四种方法 -- transform

  

效果图如下、

代码解释如下、

 父元素相对定位、子元素绝对定位，left:50%；属性以父元素位置left也就是向右距离左侧50%的距离，top：50%；属性即意思一样以父元素位置向下移动50%这里设置完之后盒子是不居中的

 需要   transform: translate(-50%, -50%); 属性 调整子元素的中心点，需要减去自身的高度宽的一半

将子元素向左和向上移动自身宽度和高度的50%，从而使子元素的中心点与父元素的中心点对齐

5、第五种方法 -- table布局 - table-cell (单元格模式)

效果图如下、

代码解释如下、

display: table-cell;   父元素变成tabel单元格模式,下面的子元素垂直居中显示 变为单元格模式vertical-align: middle;设置父元素在垂直方向对齐方式   元素在垂直方向对齐方式垂直居中
子:      margin: auto;  块级元素水平居中

table-cell 布局是一种通过模拟表格的方式来实现元素布局的方法

table-cell 布局方法虽然在早期Web开发中广泛使用，但在现代Web开发中已经不如以前那么流行了。主要原因是因为新的布局方法如 Flexbox 、 grid布局等等。

6、第六种布局 --grid

效果图如下、

代码解释如下、

使用 CSS Grid 布局可以让子元素在父容器内实现水平和垂直居中

        display: grid；      用于将一个元素设置为网格容器（Grid Container）

        place-items: center; /* 水平和垂直居中 */

Grid 布局允许你在水平和垂直方向上同时布局，非常适合创建复杂的多列或多行布局

Grid 布局提供了丰富的对齐和对齐方式，可以轻松实现项目在单元格内的精确对齐

其他属性：

  grid-template-columns: 100px 100px 100px; /* 定义三列，每列宽度为100px */
      grid-template-rows: 100px 100px;          /* 定义两行，每行高度为100px */
      gap: 10px;                                /* 行和列之间的间距为10px */

                                    以上是本人亲测有效希望对同志们在开发中有所帮助！！！ 下期间！！！