根据Bootstrap4文档，我们可以使用预定义的类align-items-center和justify-content-center类来垂直和水平对齐。我测试了Bootstrap4文档示例，它的工作原理，但是在以下代码中使用align-items-center和justify-content-center类时，这是不可取的！我使用Bootstrap类制作ul TAG display:flex，但它的内容(li tags(并未水平对齐和垂直居中。另外，我还检查了Chrome inspects中的ul属性，并具有margin-top: 0和margin-bottom: value。有什么问题？
html：
<body>
<div id="top-ribbon" class="container-fluid">
<div class="row align-items-center">
<div id="socials" class="col-6 col-md-2 offset-md-2">
<ul class="d-flex align-items-center justify-content-center">
<li class="list-inline-item color-white"><i">1</i></li>
<li class="list-inline-item color-white">2<i"></i></li>
</ul>
</div>
</div>
</div>
CSS：
color-white{
color: white;
}
#top-ribbon{
background-color: rgb(168, 8, 133);
border: 1px solid;
height: 200px;
}
.row{
height: 200px;
}
#top-ribbon div{
border: 1px solid;
}
#socials ul{
border: 1px solid;
}
jsfiddle
好吧，首先，您对HTML语法有问题。其次，您需要意识到Bootstrap中的ul元素有默认的填充和余量。删除这些并获得所需的效果。
#socials ul {
border: 1px solid;
margin: 0; padding: 0;
}
https://jsfiddle.net/xxofsr68/3/
我做了两个示例供您查看。
首先添加通用类，即 *{margin：0px;填充：0px;}它删除了额外的空间。
对于垂直对齐添加显示：flex;和Align-Flex：中心;
在添加了额度底部的程序中，应该是边缘底：0px;
* {
margin: 0px;
padding: 0px;
}
.color-white {
color: white;
}
#top-ribbon {
background-color: rgb(168, 8, 133);
border: 1px solid;
height: 200px;
Width:100%;float:left;
}
.row {
height: 300px;
}
#top-ribbon div {
border: 1px solid;
height: 100%;
}
#socials {
display: flex;
align-items:center;
}
#socials ul {
margin-bottom: 0px;
width: 100%;
float:left;text-align:center;
}
#socials ul li{float:left;}<div id="top-ribbon" class="container-fluid">
<div class="row align-items-center justify-content-center">
<div id="socials" class="col-6 col-md-2 offset-md-2">
<ul class="d-flex align-items-center justify-content-center">
<li class="list-inline-item color-white">1</li>
<li class="list-inline-item color-white">2</li>
</ul>
</div>
</div>
</div>