div在屏幕中水平垂直居中

方法一：

HTML部分：

<div  id="box">

</div>

CSS部分：

       当然，相对定位absolute也可以换成绝对定位fixed。

       只要top，right，bottom，left的值相等，也可以是其他值。

#box{

            width: 400px;

            height: 300px;

            background-color: pink;

            margin: auto;

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

     }

方法二：

HTML部分：

<div  id="box">

</div>

CSS部分：

       同样，相对定位absolute也可以换成绝对定位fixed。

#box{

            width: 400px;

            height: 300px;

            background-color: pink;

            margin: auto;

            position: absolute;

            left: 50%;

            top: 50%;

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

     }

方法三：

HTML部分：

<div  id="box">

</div>

CSS部分：

       flex方法也是相当便利容易理解的方法之一，但要注意垂直居中时，要同时设置body，和html的值。

*{

            padding: 0;

            margin: 0;

        }

 

        body,html{

            width: 100%;

            height: 100%;

        }

 

        body{

            display: flex;

            justify-content: center;

            align-items: center;

        }

       

        #box{

            width: 400px;

            height: 300px;

            background: pink;

        }

方法四：

其一：

HTML部分：

<div  id="box">

</div>

CSS部分：

这是一种利用伪元素将屏幕高度撑开，从而可以使用vertical-align:middle;方法达到垂直居中效果的一种方法

*{

            padding: 0;

            margin: 0;

        }

        html{

            width: 100%;

            height: 100%;

        }

        body{

            width: 100%;

            height: 100%;

            text-align: center;

        }

       

        body::before{

            content: '1';

            height: 100%;

            display: inline-block;

            vertical-align: middle;

        }

 

        #box{

            width: 400px;

            height: 300px;

            background: pink;

            display: inline-block;

            vertical-align: middle;

        }

其二：

当然除了利用伪元素，也可以直接使用一个空元素来达到撑开屏幕高度的效果

HTML部分：

<nav></nav>

<div  id="box">

</div>

CSS部分：

*{

            padding: 0;

            margin: 0;

        }

        html{

            width: 100%;

            height: 100%;

        }

        body{

            width: 100%;

            height: 100%;

            text-align: center;

        }

       

        nav{

            height: 100%;

            display: inline-block;

            vertical-align: middle;

        }

 

        #box{

            width: 400px;

            height: 300px;

            background: pink;

            display: inline-block;

            vertical-align: middle;

        }