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;
}

从top删除left / .box个属性。

Fiddle

Answer 2

.box{ 
   width: 400px; 
    height:400px;
    background-color:rgb(0, 32, 45);
     font-size:36px;
     border-radius: 50%;
     display: block;
     margin: 0 auto;
}

屏幕中间的HTML和CSS div

2 个答案: