一、水平居中
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用于控制横轴（即水平方向）上的对齐方式。文章来源：https://www.toymoban.com/news/detail-441542.html
3、将父元素设置为display:table-cell，并设置vertical-align: middle; text-align:center; 要设置宽高。子元素要是行内元素或行内块元素。文章来源地址https://www.toymoban.com/news/detail-441542.html
到了这里，关于前端技术中的几种居中方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
