在div中将div水平居中时遇到麻烦

Question

我正在尝试将ID为“ team”的div在其父div的内部水平居中，但是它看起来像下面的图片。 我认为将左边距和右边距设为50％可以解决问题，但事实并非如此。 我究竟做错了什么？

HTML：

<div id="clients">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Get To Know Us</h2>
                    <div id="team">
                        <ul>
                          <li><img src="images/randy.jpg" class="img-responsive" alt=""/>Randy Flug</li>
                          <li><img src="images/alec.jpg" class="img-responsive" alt=""/>Alec Tuckey</li>
                       </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>

相关CSS：

#clients {
    padding: 40px 0;
    background: #333;
}

#clients h3 {
    margin: 0px 0px 30px;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
}

#clients ul {
    padding: 0px 0px;
    margin: 0 -25px;
}

#clients ul li {
    float: left;
    margin: 0;
    list-style: none;
    width: 20%;
    position: relative;
    overflow: hidden;
    padding: 0 15px;
}

#clients ul li img {
    opacity: 0.2;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

#clients ul li:hover img {
    opacity: 1;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -webkit-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.shots .col-md-12 {
    max-width: 90%;
    margin: 0 auto;
    float: none;
}

#team{
    text-align: center;
    margin-left: 50%;
    margin-right: 50%;
    width: 100rem;
    text-decoration-color: white;
    color: white;
}

Answer 1

这就是你想要的吗？ DEMO

CSS

html { box-sizing: border-box; font: 16px/1.45 Consolas; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
#clients {
    background: #333;
}
#clients h2 {
    color: #efefef;
}
#clients h3 {
    margin: 0px 0px 30px;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    color: #efefef;
}
#clients ul {
    padding: 0px 0px;
}
#clients ul li {
    margin: 0;
    list-style: none;
    display: table-cell;
}
#clients ul li img {
    opacity: 0.2;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    margin: 5px;
    flex: 1 0 200px;
    align-self: center;
}
#clients ul li:hover img {
    opacity: 1;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.row {
    display: table-row;
}
#team {
    text-align: center;
    width: 90vw;
    height: 100%;
    text-decoration-color: #AAA;
    color: #DDD;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    align-items: center;
}