屏幕中间的 HTML 和 CSS div

Question

   <style>
    .parallax {
        background-image: url("Cpage.png");
        min-height: 700px; 
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }
    .box{ 
        position: absolute;
       top: 600px;
        left: 300px; 
       width: 900px; 
        height:600px;
        background-color:rgb(0, 32, 45);
         font-size:36px;
         border-radius: 50%;
    }

    .cap img{
       position: relative; 
       height:130px; 
       width:170;
       left: 340px; 
    }
</style>
<div class="parallax">
                <div class="box" >
                    <div class="cap"><img src="Capture.png"/></div>
                    <p style="color: white;text-align: center;">
                        LEARNING TOWARDS BETTER FUTURE!<br>

                    </p>
                </div>
            </div>

问题是当我切换屏幕时。当我从 15 英寸屏幕转到 13 英寸屏幕时，div 会移动。它不再位于屏幕中间。可能是因为“左:”当屏幕比那个小时，它真的变得很乱。我该如何解决？

Answer 1

您可以使用 Flex 来帮助您将其居中:

 .parallax {
    display: flex;
    align-items: center; // vertical centering
    justify-content: center; // horizontal centering
    background-image: url("Cpage.png");
    min-height: 700px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

并从 .box 中删除 top/left 属性。

Fiddle