在下面的代码中，如何自动将第二个div置于父div的中心？我在这里用nth-child。您会在小提琴中看到我的意思。第一个和第三个对我来说还可以，但是第二个是有问题的孩子。
Fiddle
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
overflow: hidden;
}
.image img {
vertical-align: middle;
}
.delete {
position:relative;
vertical-align:middle;
display:inline-block;
}
.delete .icon-remove {
content:'';
position:absolute;
bottom:0;
right:0;
}
.imageContainer {
width:665px;
border:1px solid #666;
float:left;
position: relative;
overflow: hidden;
}
.image:nth-child(3n+1) {
margin-left:0px;
}
.image:nth-child(3n+2) {
margin-left: auto;
margin-right: auto;
}
.image:nth-child(3n+0) {
float:right;
}
</style>
</head>
<body>
<div class="imageContainer">
<div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
<div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
<div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
<div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
<div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
<div class="image"><div class="delete"><img class="thumbnail" src="/imgur/in/IN00011407520181.JPG"><i class="icon-remove white"></i></div></div>
</div>
</body>
</html>
最佳答案
我知道这不是在这里回答的最佳方法，但是我现在没有时间编写代码。我的提示是尝试display:flexbox。在这里，您可以定义元素之间的间隙，我只能在新的浏览器中使用它，并且需要花费更多的渲染过程，但是它应该可以满足您的目的。
MDN链接在这里，希望您能对您有所帮助。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
最好的祝福