元素垂直居中_优美主题

 在写css样式时，水平居中比较简单，这里主要介绍垂直居中的方法，代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style&g...

在写css 样式时，水平居中比较简单，这里主要介绍垂直居中的方法，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            background: rgba(0,0,0,0.5);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .main{
            width: 400px;
            height: 400px;
            margin: 20px auto;
            position: relative;
            background: rgba(0,0,0,0.5);
            color: #fff;
        }
        .main p{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div>
        <p>对对对对对对对对对对对对对对对<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是</p>
    </div>
    <div>
        <p>对对对对对对对对对对对对对对对<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是<br>猜猜猜猜猜错错错错错错错错错错错<br>试试事实上是是是</p>
    </div>
</body>
</html>