首页 > 代码库 > 水平居中和transform: translateY(-50%) 实现元素垂直居中效果

水平居中和transform: translateY(-50%) 实现元素垂直居中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .center {
        width: 960px;
        height: 500px;
        margin: 0 auto;
        background: #1879D9;
    }
    
    .center p {
        background: #fff;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100px;
    }
    </style>
</head>
<body>
    <div class="center">
        <p>垂直居中内容</p>
    </div>
</body>
</html>

  效果如图:

技术分享

 

水平居中和transform: translateY(-50%) 实现元素垂直居中效果