html - 将两个 div 在 flex 容器中水平居中

Question

我有两个 div(一个在另一个下面)，我希望此列居中对齐。但使用 justify-content: center 时，div 沿 y 轴(垂直)居中对齐，而不是沿 x 轴(水平)居中对齐。

我想知道(使用 flexbox)沿 x 轴居中对齐的唯一方法是否是添加 margin: auto。

<div id="sharesocial">
  <div id="sharecondividi">
    Condividi
  </div>
  <div id="shareicons">
    <a target="blank" href=""><span class="fa fa-twitter-square" id="twitterbt"></span></a>
    <a target="blank" href=""><span class="fa fa-google-plus-square" id="googleplusbt"></span></a>
    <a target="blank" href=""><span class="fa fa-facebook-square" id="facebookbt"></span></a>
  </div>
</div>

CSS

#sharesocial {
 background: #646464 none repeat scroll 0 0;
 border-radius: 10px;
 display: flex;
 flex-direction: column;
 height: 100px;
 justify-content: center;
 width: 174px;
}

#sharecondividi {
 align-self: center;
 color: #fff;
 display: flex;
 text-align: center;
}

#shareicons {
 align-items: center;
 background: #f0f0f0 none repeat scroll 0 0;
 border-radius: 5px;
 display: flex;
 height: 50%;
 justify-content: space-around;
 width: 95%;
}

这里是 jsfiddle:

https://jsfiddle.net/uLah0gqa/

Answer 1

当 flex-direction 为 column 时，您可以使用 justify-content 进行垂直对齐 和 align-items 用于水平对齐。

试试这个:

#sharesocial {
    align-items: center;
}

Revised Demo

了解更多:

• How to Center Elements Vertically and Horizontally in Flexbox
• Methods for Aligning Flex Items