垂直水平居中的几种方式

首先分为文本垂直水平居中和 块元素垂直水平居中

        1. 文本垂直水平居中

        先来说说文本垂直水平居中吧，直接看代码。

        css代码：

        #app {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 添加背景颜色看的清楚些 */
            /* 设置文本行高等于父容器的高度 */
            line-height: 100px;
            /* 设置文本的排列方式为center:居中  注: align:排列  */
            text-align: center;
        }

        html代码：

    <div id="app">
        川一
    </div>

        展示效果：

        

        2. 块元素垂直水平居中

        再来说说块元素的垂直水平居中的方法

        开始之前先来聊聊 position属性：

        这里就简单的说下position的两个值吧，relative(相对定位) 和 absolute(绝对定位)

         简单来说就是relative(相对定位）是相对于自身一开始的位置，通过top，right，left，bottom四个属性值来确定位置。

         absolute(绝对定位)才是重点，它的使用需要依靠有定位属性的祖先元素(父元素，爷爷元素等) 这就是为什么它的父级元素(父元素)要添加position: relative 的原因。

        聊完position之后，再来聊聊 transform属性的 translate()方法。

          tanslate实际上就是相对于原来的位置进行位移 如transform: translate(50px,50px)，也可以写百分比值transform: translate(50%,50%) ，！！！ 记住正值是往右下移动

        好了，上代码吧。

        2.1 通过绝对定位的方式（已知宽高）

        css代码:

#parent {
    /* 先来给父容器(父元素)设置宽高, 实际上父容器也可以是body元素，此时就不用设置宽高了 */
    width: 300px;
    height: 300px;
    background-color: pink;/*还是为了看的清楚些*/
    /* 先将父容器设置为相对定位 不设置相对定位的话这里会相对于body 来进行绝对定位*/
    position: relative;
}

#child {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    /* 设置为绝对定位 */
    position: absolute;
    /* 通过设置下面两个属性，并不会达到垂直水平居中的效果，还需要进行位移 */
    top: 50%;
    left: 50%;
    /* 通过transform属性的translate 进行位移 */
    transform: translate(-50%,-50%); /*百分比是按照当前元素的宽高而定*/
    /* 也可以写成 transform: translate(-50px,-50px); */
    /* 这里也可以直接通过设置 margin-left: -50px 和margin-top: -50px 来实现位移*/
}

html代码:

    <div id="parent">
        <div id="child"></div>
    </div>

效果展示：

 2.2 通过绝对定位的方式（未知宽高，由内容撑开）

css代码:

#parent {
    /* 先来给父容器(父元素)设置宽高, 实际上父容器也可以是body元素，此时就不用设置宽高了 */
    width: 300px;
    height: 300px;
    background-color: pink;/*还是为了看的清楚些*/
    /* 先将父容器设置为相对定位 不设置相对定位的话这里会相对于body 来进行绝对定位*/
    position: relative;
}

#child {
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
}

html代码：

    <div id="parent">
        <div id="child">
            川一
        </div>
    </div>

效果展示：

 2.3 通过display：table-cell 实现

只需要给父容器设置属性即可

css代码：

    .cell{
        width: 200px;
        height: 200px;
        background-color: pink;
        display: table-cell;
        text-align: center;
        /* 注: veetical:竖直 align: 排列  vertical-align: 竖直排列方式*/
        vertical-align: middle;
        }

html代码:

    <div class="cell">
        <div>川一</div>
    </div>

效果展示：

 2.4 通过flex 弹性布局实现

不熟悉弹性布局的小伙伴建议先去了解一下弹性布局哦

css代码：

        #container {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 设置为弹性布局  容器内的元素都是item*/
            display: flex;
            /* 设置主轴排列方式 默认主轴为水平方向 */
            justify-content: center;
            /* 设置侧轴，也就是垂直方向上的排列方式 */
            align-items: center;
        }

html代码：

    <div id="container">
        <div>川一</div>
    </div>

效果展示：

好啦，就说到这里吧。嘿嘿，嘿嘿嘿。