CCS居中样式语法

1.行内元素居中

盒子内的文本文字内容居中，水平方向居中text-align:center; 垂直方向居中line-height:盒子高度；这样就可以实现文字在容器中居中显示。

2.块元素如何居中显示

2.1 使用flex布局

让子盒子可以在父盒子中水平垂直居中显示。
使用对父盒子使用flex布局，然后再让flex伸缩元素向每行中点排列justify-content：center；最后让盒子里面的内容侧轴居中align-item：center；。
 

2.2 使用定位加图像变换来实现子盒子的水平垂直居中显示。

第一种定位方式：
                               

对父盒子进行相对定位，然后再给子盒子绝对定位。子盒子绝对定位后距离左边以及上边的距离分别设为50%，这里的50%指的是父盒子宽高的50%。将子盒子向左再向上移动子盒子一半宽高的距离。使用transform：translate（-50%，-50%）；让子盒子水平和垂直方向移动自身宽高的一半。这样就实现了子盒子水平垂直居中的效果。（子盒子必须有宽高）
 

第二种定位方式：
                               

对父盒子进行相对定位，然后再给子盒子绝对定位。这里不同的是，不是通过图形变换了，而是通过子盒子的外边距为负值，让其回到中心点