定义垂直居中一个浮动元素

 //父盒子有宽高:

        .parent {

                width: 150px;

                height: 150px;

                background-color: teal;

                position: relative; /*注意父盒子要相对定位*/

                }

                .child {

                width: 50px;

                height: 50px;

                background-color: violet;

                float: left;

                position: absolute;

                top: 50%; /*容器的一半*/

                left: 50%;

                margin-top: -25px; /*子盒子高度的一半*/

                margin-left: -25px; /*子盒子宽度的一半*/

                }

 

 //父盒子没有宽高:

            /子盒子

            #div1{

            width: 200px;

            height: 200px;

            margin:auto;

            position: absolute; //父元素需要相对定位

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background: red;

            }

 

 

//css3 中的新属性 transform 实现盒子居中

            .parent{

            /*父盒子*/

            width: 500px;

            height: 500px;

            background: green;

            position: relative;

            }

            #child{

            /*我是子盒子我要居中*/

            width: 200px;

            height: 200px;

            background: red;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

            }