Question

我知道我可以将绝对div放在每个其他元素的前面。

HTML

<div class='otherDiv1'></div>
<div class='otherDiv2'></div>
<div class='otherDiv3'></div>
<div class='otherDiv4'></div>

<div class='centerDiv'></div>

CSS

.centerDiv{
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
    z-indez:100; // Just a test number, just to ensure this div is in front of every other element
}

因此，以这种方式，div将完全与中心对齐并做出响应。

所以我的问题如下：

将2个div完全对齐的最佳方法是什么，就像前一个div一样，也是响应

大屏幕

小屏幕

如果您有任何想法，请告诉我（：

Answer 1

.centerDiv {
        display: inline-block;
        width: 80%;
        text-align: center;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }
    
    .centerDiv2 {
        border: 1px solid red;
        margin: 0 auto;
        width: 45%;
    }
    
    .left,.right {
 
        display: inline-block;
    }
    
    
    @media only screen and (max-width: 760px) {
        .left,
        .right {
            display: block;
        }
        .left {
            margin-bottom: 20px;
        }
    }

<!DOCTYPE html>
<html>

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
</head>

<body>

        <div class='centerDiv'>
            <div class='centerDiv2 left'>abc</div>
            <div class='centerDiv2 right'>xyz</div>
        </div>


</body>

</html>

我认为你需要这种类型的设计。如果不是，请告诉我。

Answer 2

将2个div存储在1个居中的绝对定位div中。

Answer 3

设置一个位置的中心div并添加两个div。请参阅以下html

<强> HTML

self.navigationController.navigationBar.barTintColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"YourImage.png"]];
self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor whiteColor]};

Answer 4

使用以下代码::

HTML：

<div class='otherDiv1'>abc</div>
<div class='otherDiv2'>abc</div>
<div class='otherDiv3'>abc</div>
<div class='otherDiv4'>abc</div>

<div class='centerDiv'>
  <div class='centerDiv2 left'>xyz</div>
  <div class='centerDiv2 right'>yzrr</div>
</div>

CSS：

.centerDiv{
display: inline-block;
width: 80%;
text-align: center;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}

.centerDiv2{
border: 1px solid red;
margin: 0 auto;
width: 40%;
}

.left{
float: left;
}

.right{
float: right;
}

如何居中2个绝对div

4 个答案: