前端面试题DAY2-----CSS部分（子元素居中的常用方法）

6.使元素居中

方法一：定位加margin：   父相子绝，子中的top-bottom-right-left ：0  和  margin ：auto 

这样做是让子的content居中，其余空间用margin撑满

方法二：定位加transform：   父相子绝  子中top和left：50%   transform：translate（-50%，-50%） 具体解释：

1. position: relative;（父相子绝）：父元素需要设置为相对定位，这样子元素就可以使用绝对定位相对于父元素进行定位。

2. 子元素的样式：

   • position: absolute;（子绝）：子元素使用绝对定位，这样它可以脱离文档流，并且相对于最近的具有定位属性（非 static）的祖先元素进行定位。
   • top: 50%; 和 left: 50%;：这两个属性将子元素的顶部和左侧分别定位到父元素的50%处，也就是水平和垂直方向上都处于父元素的中心位置。

3. transform: translate(-50%, -50%);：这个属性将根据元素自身的尺寸，将元素向左和向上分别移动自身宽度和高度的50%，从而使得子元素在父元素中实现了水平和垂直居中的效果。

这种方法主要是通过移动子元素来实现的，此时的子元素没有产生margin，它的总大小未改变

方法三：使用flex弹性布局  在父元素中设置

display:flex    justify-content:center      align-items：center  这样子做后在父中添加的子元素就是居中的了  这种方法通过控制父元素使其的子元素内容达到居中的效果，不会影响子元素的大小

方法四：grid布局  父中设置  display: grid;     place-items: center;   使用表格布局，让元素居中在表格中间

方法五：table布局

.parent { display: table; }      .child { display: table-cell; vertical-align: middle; }  不建议使用table，它会使子元素自动填充父元素，改变子元素的大小，