<分区>
<分区>
我正在使用 Bootstrap ，这是我的 HTML 代码:
<div class="row">
<div class="col-md-3">
<div class="a">
<p>a</p>
</div>
</div>
<div class="col-md-3">
<div class="b">
<p>b</p>
</div>
</div>
<div class="col-md-3">
<div class="c">
<p>c</p>
</div>
</div>
<div class="col-md-3">
<div class="d">
<p>d</p>
</div>
</div>
</div>
对于每个类 a,b,c,d，CSS 代码如下:
.a{
background-image: url('a.jpg');
width: 300px;
height: 300px;
margin-top: 5%;
border-radius: 10px;
}
问题是我想将这些 div(a、b、c、d 类)定位到每个类(col-md-3)的中心。谁能帮帮我？
最佳答案
您可以使用自动边距水平居中元素:
.a, .b, .c, .d {
margin: 0 auto;
}
您还可以在父元素上使用 flexbox 实现水平和垂直居中:
.col-md-3 {
display: flex;
align-items: center;
justify-content: center;
}
关于html - 如何将具有定义宽度和高度的 div 定位在另一个 div 的中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42373345/