前端|如何让一个元素水平居中/垂直居中？

  不知道你们是否有这样的体验，水平居中在前端中经常使用，但是！！！每次一用就各种不起作用。各种justify-content,align-item,text-align,margin，经过种种尝试之后，终于能够居中了，但下一次使用的时候，就…又忘的一干二净。

下面，列举出几种常见的元素的居中方法

一、"image"标签水平居中

1.给image的css样式中加入 margin: 0 auto;   display:block;

   为什么要加入display：block元素呢？因为image是一个inline元素。它的宽度就是照片的宽度，而block元素是占据整行的，当使用margin：0 auto时，代表将这个元素水平居中，而image元素的水平宽度只有自己本身的宽度，居中之后还是在原来的位置，将它变成一个block元素之后，它的宽度就是整行的宽度，就可以水平居中啦。

2.在image外面套一个div盒子;将div的css样式设置为align:center

   这个就不用解释了

二、让字体垂直居中,水平居中

1.垂直居中
   让所有的字体都垂直居中只需要将字体的行高设置成与其父元素的高度一致，就可以将字体居中。
2.水平居中
   当字体放到inline元素中时，可以参考image元素，先将字体设置为display:block;然后再text-align:center即可。
   当把字体放到block元素中时，直接text-align:center即可。
        

三、让一个按钮水平居中
1.将其外部加一个div，设置div：text-align:center
2.跟image元素一样，将button设置为block元素，再margin：0 auto

四、同时让几个元素水平居中

1. justify-content:center;
   将几个元素居中放置

2. justify-content:space-around;

使得几个元素中间留有空隙，还有一些其他的属性，可以试试
如果后面有要补充的，再补充吧~