# CSS面试题：一个盒子不给宽度和高度如何水平垂直居中？

第一种方式 ：使用flex布局*

        *{

            margin: 0;

            padding: 0;

        }

        .container{

            display: flex;

            width: 300px;

            height: 300px;

            border:1px solid blue;

            justify-content: center;

            align-items: center;

        }

        .box1{

            background-color: red;

        }

    

    <div class="container">

        <div class="box1">box1

    

**** # ****第二种方式：使用absolute绝对定位，再使用transform和translate平移********         *{

            margin: 0;

            padding: 0;

        }

        .container{            

            width: 300px;

            height: 300px;

            border:1px solid blue;

            position: relative;

        }

        .box1{

            background-color: red;

            position: absolute;

            left: 50%;

            top: 50%;

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

        }

    

    <div class="container">

        <div class="box1">box1