CSS样式中居中显示的方式

目录

        1.文字内容居中

        2.盒子模型如何居中显示

                2.1 使用flex布局，让子盒子可以在父盒子中水平垂直居中显示。

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

                        第一种定位方式：

                        第二种定位方式：

                        第三种定位方式：

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

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

                        第二种定位方式：

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

                        第三种定位方式：

                                这种方式怎么理解呢。首先需要先对父盒子进行相对定位，然后再给子盒子绝对定位（子绝父相）。这里我们可以这样理解，在没有最后一条语句margin：auto；的情况下，我们给子盒子的每一条边向着对应方向的父盒子的每一条边系上一条绳子，没给margin：auto；时，四条绳子是很松的状态，加上margin：auto；绳子立马系紧了。这样就实现了子盒子水平垂直居中的效果。这里强调一点，子盒子必须有宽高。

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

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

                       以上就是一些可以实现文本内容，子盒子以及一些行内元素水平垂直居中的方式。大家有兴趣的可以试一试。盒子部分使用flex布局时最简单最常用的方法。