学习笔记（1）----水平垂直居中的方法

已知待居中元素的width和height

方法一：

　　关键点：给其父容器设置定位，子容器：position:absolute;
               　　　　　　　　　　　　　　  left:50%;
                                                        top:50%;
                                                        margin-top:-50px; /*因为这个child-01的height为100px,所以这里是-50px*/
                                                        margin-left:-50px;

   代码示例：

html:

<div class="parent-01">
    <div class="child-01">我是child-01</div>
</div>

css:

/*parent-01开始*/
            .parent-01{
                position:relative;

                width:200px;
                height:200px;
                border:green solid 1px;
                margin-bottom:50px;
                margin-left:50px;
            }
            .child-01{
                position:absolute;
                left:50%;
                top:50%;
                margin-top:-50px; /*因为这个child-01的height为100px,所以这里是-50px*/
                margin-left:-50px;

                width:100px;
                height:100px;
                background-color:yellow;
            }
            /*parent-01结束*/

方法二：

　　关键点：父容器定位，子容器：position:absolute;
               　　　　　　　　　　　margin-top:50%;
                                              margin-left:50%;
                                              transform:translate(-50px,-50px);/*为了实现水平垂直居中，所以这里的translate不能分开写，否则后面的会覆盖前面的,这里写px也是可以得

代码示例：

html:

<div class="parent-02">
    <div class="child-02">我是child-02</div>
</div>

css:

/*parent-02开始*/
            .parent-02{
                position:relative;

                width:200px;
                height:200px;
                border:green solid 1px;
                margin-bottom:50px;
                margin-left:50px;
            }
            .child-02{
                position:absolute;
                margin-top:50%;
                margin-left:50%;
               transform:translate(-50px,-50px);/*为了实现水平垂直居中，所以这里的translate不能分开写，否则后面的会覆盖前面的,这里写px也是可以得*/
　　　　　　　　　/*transform:translate(-50px,-50px);/*为了实现水平垂直居中，所以这里的translate不能分开写，否则后面的会覆盖前面的,这里写px也是可以得,不过前提是已知子容器的宽高*/
                background-color:yellow;
                width:100px;
                height:100px;
            }
            /*parent-02结束*/

方法三：

   关键点：父容器使用flex布局,即父容器设置为：
                display:flex;
                justify-content:center;/*伸缩项目向一行的中间位置对齐*/
                align-items:center;/*伸缩项目向一列的中间位置对齐*/

html:

<div class="parent-04">
    <div class="child-04">我是child-04</div>
</div>

css:

/*parent-04开始*/
            .parent-04{
                width:200px;
                height:200px;
                border:green solid 1px;
                margin-bottom:50px;
                margin-left:50px;

                display:flex;
                justify-content:center;/*伸缩项目向一行的中间位置对齐*/
                align-items:center;/*伸缩项目向一列的中间位置对齐*/
            }
            .child-04{
                width:100px;
                height:100px;
                background-color:yellow;
            }
            /*parent-04结束*/

方法四：

    关键点：父容器设置定位，子容器：position:absolute;
                　　　　　　　　　　　　left:0;
                　　　　　　　　　　　　top:0;
               　　　　　　　　　　　　 right:0;
                　　　　　　　　　　　　bottom:0;
               　　　　　　　　　　　　 margin:auto;

html:

<div class="parent-03">
    <div class="child-03">我是child-03</div>
</div>

css:

            /*parent-03开始*/
            .parent-03{
                position:relative;

                width:200px;
                height:200px;
                border:green solid 1px;
                margin-bottom:50px;
                margin-left:50px;
            }
            .child-03{
                position:absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
                margin:auto;

                width:100px;
                height:100px;
                background-color:yellow;
            }
            /*parent-03结束*/

待水平垂直居中的元素width和height未知

方法一：

    关键点：父容器定位，子容器：    position:absolute;
                　　　　　　　　　　　 margin-top:50%;
               　　　　　　　　　　　 margin-left:50%;
                                               transform:translate(-50%,-50%);/*为了实现水平垂直居中，所以这里的translate不能分开写，否则后面的会覆盖前面的*/

和上述方法二类似，区别在于translate()中的值是%还是px

该演示的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title>常见的水平垂直居中方法汇总</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            /*parent-01开始*/
            .parent-01{
                position:relative;

                width:200px;
                height:200px;
                border:green solid 1px;
                margin-bottom:50px;
                margin-left:50px;
            }
            .child-01{
                position:absolute;
                left:50%;
                top:50%;
                margin-top:-50px; /*因为这个child-01的height为100px,所以这里是-50px*/
                margin-left:-50px;

                width:100px;
                height:100px;
                background-color:yellow;
            }
            /*parent-01结束*/
            /*parent-02开始*/
            .parent-02{
                position:relative;

                width:200px;
                height:200px;
                border:green solid 1px;
                margin-bottom:50px;
                margin-left:50px;
            }
            .child-02{
                position:absolute;
                margin-top:50%;
                margin-left:50%;
                /*transform:translate(-50%,-50%);/*为了实现水平垂直居中，所以这里的translate不能分开写，否则后面的会覆盖前面的*/
               transform:translate(-50px,-50px);/*为了实现水平垂直居中，所以这里的translate不能分开写，否则后面的会覆盖前面的,这里写px也是可以得*/

                background-color:yellow;
                width:100px;
                height:100px;
            }
            /*parent-02结束*/
            /*parent-03开始*/
            .parent-03{
                position:relative;

                width:200px;
                height:200px;
                border:green solid 1px;
                margin-bottom:50px;
                margin-left:50px;
            }
            .child-03{
                position:absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
                margin:auto;

                width:100px;
                height:100px;
                background-color:yellow;
            }
            /*parent-03结束*/
            /*parent-04开始*/
            .parent-04{
                width:200px;
                height:200px;
                border:green solid 1px;
                margin-bottom:50px;
                margin-left:50px;

                display:flex;
                justify-content:center;/*伸缩项目向一行的中间位置对齐*/
                align-items:center;/*伸缩项目向一列的中间位置对齐*/
            }
            .child-04{
                width:100px;
                height:100px;
                background-color:yellow;
            }
            /*parent-04结束*/
        </style>
    </head>
    <body>
        <div class="parent-01">
            <div class="child-01">我是child-01</div>
        </div>
        <div class="parent-02">
            <div class="child-02">我是child-02</div>
        </div>
        <div class="parent-03">
            <div class="child-03">我是child-03</div>
        </div>
        <div class="parent-04">
            <div class="child-04">我是child-04</div>
        </div>

    </body>
</html>