前端技术中的几种居中方式

一、水平居中

1、使用margin:0px auto可以使盒子水平居中，但要设置宽度。

2、在父元素中使用text-align:center可以将子元素设置水平居中，但子元素必须为行内元素或行内块元素。

3、使用绝对定位，父相子绝的原则，在子元素中设置left:50%和transform:translateX(-50%)。可以不设置宽高。

  这里的left:50%是将子元素的左边缘线紧贴在父元素的中线，transform:translateX(-50%)是将子元素向左移动其自身宽度的一半。

二、垂直居中

1、使用绝对定位，父相子绝的原则，在子元素中设置top:50%和transform:translateY(-50%)。可以不设置宽高。

  这里的top:50%是将子元素的上边缘线紧贴在父元素的中线，transform:translateY(-50%)是将子元素向上移动其自身高度的一半。

2、将父元素设置为display:table-cell，并设置vertical-align: middle，要设置宽高。子元素要是行内元素或行内块元素。

3、要想使文字垂直居中，最简单的方式是将行高line-height的值设置为元素的高度一样的值。

三、水平垂直居中

1、使用绝对定位，父相子绝的原则，在子元素中设置left:50%;top:50%和transform:translateX(-50%) translateY(-50%)。可以不设置宽高。(推荐使用)

2、使用flex布局时，在父元素中设置display:flex; align-items: center; justify-content: center;可以使子元素水平垂直居中。

 align-items用于控制弹性盒的纵轴（即垂直方向）上的对齐方式，justify-content用于控制横轴（即水平方向）上的对齐方式。

3、将父元素设置为display:table-cell，并设置vertical-align: middle; text-align:center; 要设置宽高。子元素要是行内元素或行内块元素。