Question

我希望在页面中间垂直和水平居中。这是我到目前为止尝试过的工作（但仅使用像素）

HTML

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>
<body>
    <div class="center">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</body>

CSS

.center { 
    height: 400px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这确实有效，但每当我将400px改为40％时，它就不会理解为什么。我真的很感激一些帮助。

谢谢！

使用百分比对中心（垂直和水平）。如何？

0 个答案: