盒子元素垂直居中的几种方式

垂直居中的四种实现方式

1. 使用margin 利用百分比进行垂直居中
2. 使用margin:auto 进行居中显示
3. 使用css3的transform属性进行垂直居中
4. 使用flex 布局进行垂直居中

//先设置必要的样式 html 结构
<div class="box">
        <div class="box1">
            我是要被垂直居中的盒子
       </div>
</div>
/* 基本样式 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;//盒子的内减模式
        }
//方法如下
 .box{
            /*必要的宽高*/
            width: 400px;
            height: 400px;
            background-color:aqua;
            margin: 100px auto;
            position: relative;

            /* 方法四  ==>flex布局方式 记住不能把排列方式写到子项去 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1{
            /* 第一种方式 margin  百分比是相对于父元素的*/
            /* position: absolute;
            top: 50%;
            left:50%;
            margin-left: -100px;
            margin-top: -100px; */

            /* 第二种方式  margin  */
            /* margin: auto;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0; */


            /* 第三种方式==>css3 的方式  利用了translate 中的百分比相对于它自己*/
            /* position: absolute;
            top: 50%;
            left:50%;
            transform: translate(-50%,-50%); */


            /*必要的宽高*/
            width: 200px;
            height: 200px;
            background-color: blueviolet;

        }