CSS元素居中的方式有哪些？

简介：让元素居中的方法有很多，接下来我为大家介绍在css当中基础的3种方法

• 第一种方法(针对于文字的):

  a、先用display-block把子元素转换成块元素。
  b、再给子元素加上text-align: center;让它在水平方向居中。
  c、最后调整“内容”的行高line-height和父元素的高度一致。让它垂直方向居中。

  

• 第二种方法针对于元素在浏览器的居中，一般用在banner图上面(要用到定位)

  a、给父元素添加position: relative;让它线成为参照物
  b、给子元素添加

    position:fixed;
    left:50%;
    top:50%;
  

  这一步的目的是让子元素分别向右边和下面移动50%，从而使子元素的顶部和右边和父元素的水平中心线、垂直中心线对齐。

  c、最后再用margin调整子元素的位置即可，给子元素加上margin:-高度的一半 0 0 -宽度的一半；(top和left值为负数就行了)

优点：这种居中的方式可以跨浏览器使用

- 第三种方法(要用到定位)

a、给父元素添加position: relative;让它线成为参照物
b、给子元素添加

	position:fixed;
	top: 0;right: 0;
    bottom: 0;left: 0;
    margin: auto;

• 第四种方法(弹性布局)

a、设置一个盒子为flexbox
b、给这个盒子(也就是父元素)添加display：flex
c、给父元素添加水平居中justify-content: center;
d、给父元素添加垂直居中align-items: center;

• 第五种方法(2D的变换)
  简要说明：让子元素在父元素中沿着x、y两个轴进行移动

移动的距离，公式如下（父元素的宽高-子元素的宽高）/2

这是常见的五种方式，如果还有其他的希望大家在评论区补充，谢谢！