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%）；让子盒子水平和垂直方向移动自身宽高的一半。这样就实现了子盒子水平垂直居中的效果。（子盒子必须有宽高）
 

第二种定位方式：
                               

对父盒子进行相对定位，然后再给子盒子绝对定位。这里不同的是，不是通过图形变换了，而是通过子盒子的外边距为负值，让其回到中心点的位置，这个外边距的负值大小为宽高的一半。这样就实现了子盒子水平垂直居中的效果。（子盒子必须有宽高）
   

第三种定位方式：

对父盒子进行相对定位，然后再给子盒子绝对定位。设置left：0:；right：0；top：0；bottom：0:； margin：auto；就实现了子盒子水平垂直居中的效果。是不是很神奇，想知道为啥不，我也不知道，记住就完事了（子盒子必须有宽高）

3.使用表格属性实现行内元素定位

vertical-align:center;是用来指定行内元素或表格元素居中的，让父盒子的display属性变成表格，再让子元素的行内元素display属性变成表格元素，这样一来就可以对表格元素使用vertical-align:center;来达到垂直居中的效果，再配合上text-align:center;实现水平方向上的文字居中。