[分享]css中 各类居中显示的总结

在前端开发中，居中显示是一个非常常见的需求，方法也各有不同。下面总结了CSS中各类居中显示的方法。水平居中 / 对于行内元素 / textalign: center; / 对于块级元素 / margi...

在前端开发中，居中显示是一个非常常见的需求，方法也各有不同。下面总结了CSS中各类居中显示的方法。

水平居中

 /* 对于行内元素 */
  text-align: center;
    
  /* 对于块级元素 */
  margin: 0 auto; 

对于行内元素，可以通过设置其所在的容器的text-align属性来实现水平居中。而对于块级元素，可以通过给其设置margin来实现水平居中，其中左右外边距都设置为auto。

垂直居中

 /* 对于单行文本的行内元素或图片 */
  line-height: 容器高度;
    
  /* 对于块级元素 */
  display: flex;
  align-items: center;
    
  /* 对于绝对定位元素 */
  top: 50%;
  transform: translateY(-50%); 

对于单行文本的行内元素或图片，可以通过设置其所在的容器的line-height属性等于容器的高度来实现垂直居中。而对于块级元素，可以通过设置其所在的容器为flex布局，并设置align-items属性为center来实现垂直居中。而对于绝对定位元素，可以通过将其顶部设置为50%，并通过transform属性将其向上移动自身高度的一半来实现垂直居中。

水平垂直居中

 /* 对于绝对定位元素 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    
  /* 对于flex布局 */
  display: flex;
  justify-content: center;
  align-items: center;
    
  /* 对于grid布局 */
  display: grid;
  place-items: center; 

当需要同时实现水平和垂直居中时，可以通过以下几种方式进行实现。对于绝对定位元素，可以将其顶部与左侧都设置为50%，并通过transform属性将其向左、向上移动自身宽高的一半来实现水平垂直居中。而对于flex布局，可以通过设置其所在容器的display为flex，并设置justify-content和align-items属性都为center来实现水平垂直居中。对于grid布局，可以通过设置其所在容器的display为grid，并设置place-items属性为center来实现水平垂直居中。