Html 将Div置于绝对位置的中心的更好方法？_Html_Css_Parallax_Absolute

Html 将Div置于绝对位置的中心的更好方法？

html css

Html 将Div置于绝对位置的中心的更好方法？,html,css,parallax,absolute,Html,Css,Parallax,Absolute,这就是我想要做的我想要一个z-index-1的div，在其他两个div之间的某个地方，来测试它的视差效果。我把所有的东西都放在中间，边距为：0 auto。但是当我把视差div的位置改为绝对时，它移到了页面的左侧。接下来我试着把它移回中间，左边是：50%，它不起作用，所以我把它改成左边是：12.5%，它起作用了但我的问题是：我可以用任何其他方式来做吗？！我现在所做的是对的还是将来会引起一些问题代码如下： Html: <!DOCTYPE html> <html> <

这就是我想要做的

我想要一个z-index-1的div，在其他两个div之间的某个地方，来测试它的视差效果。我把所有的东西都放在中间，边距为：0 auto。但是当我把视差div的位置改为绝对时，它移到了页面的左侧。接下来我试着把它移回中间，左边是：50%，它不起作用，所以我把它改成左边是：12.5%，它起作用了

但我的问题是：我可以用任何其他方式来做吗？！我现在所做的是对的还是将来会引起一些问题

代码如下：

Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meaningless Pap</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="container">
        <div class="content1">
            <h1>Welcome! </h1>
            <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>

        <div class="breaker" data-0="background-position:0px 0px;" data-700="background-position:0px -300px;">
            <h2> this is a text </h2>
        </div>

        <div class="content2">
            <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>

    </div>
    <script type="text/javascript" src="skrollr.min.js"></script>
    <script type="text/javascript">
        skrollr.init();
    </script>
</body>

</html>

你的方法没有错。绝对定位时，宽度百分比和左侧百分比的计算方式相同-相对于

绝对定位元素的另一种方法是同时指定左位置和右位置。这样做的优点是不受任何边框或填充的影响

.breaker {
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    height: 250px;
    background: url('bg.jpg');
    z-index: -1;
}

.breaker {
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    height: 250px;
    background: url('bg.jpg');
    z-index: -1;
}