我有以下标记：
<div class="wrapper">
<div class="block new-block"></div>
<div class="block used-block"></div>
<div class="block service-block"></div>
<div class="block certified-block"></div>
<div class="block offer-type-block"></div>
</div>
以及以下带有它的 css：
.wrapper {
width : 800px;
height : 100px;
background : #393533;
margin : auto;
}
.block {
width : 19%;
height : 80px;
background : salmon;
display : inline-block;
}
我想在容器包装容器中水平和垂直地将内部 5div 居中，如何使用 css 实现这一点。提前谢谢！
一种方法是在包装器上使用 CSS flexbox 并将内容居中对齐：
.wrapper {
width : 800px;
height : 100px;
background : #393533;
margin : auto;
display: flex;
justify-content: center;
}
.block {
width : 19%;
height : 80px;
background : salmon;
display : inline-block;
align-self: center;
}<div class="wrapper">
<div class="block new-block">test</div>
<div class="block used-block">test</div>
<div class="block service-block">test</div>
<div class="block certified-block">test</div>
<div class="block offer-type-block">test</div>
</div><!DOCTYPE html>
<html>
<head>
<title> Sample Code </title>
<style>
.wrapper {
width: 800px;
height: 120px;
background: #393533;
margin: auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.block {
width : 19%;
height : 80px;
background : salmon;
display : inline-block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="block new-block"></div>
<div class="block used-block"></div>
<div class="block service-block"></div>
<div class="block certified-block"></div>
<div class="block offer-type-block"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
</script>
</body>
</html>请尝试以下代码。也许它可以帮助你
.wrapper {
width : 800px;
height : 100px;
background : #393533;
margin : auto;
position: relative;
}