将两个 div 居中到主 div 的中间答案

【问题标题】：Center two divs to middle inside main div将两个 div 居中到主 div 的中间
【发布时间】：2014-12-07 09:29:22
【问题描述】：

我想将两个 div（facebook 网站名称和 facebook 喜欢/分享按钮）居中到 div 的中间。我创建了一个主 div：

.fb_div{
 background-color:black;
 width:250px;
 height:150px;
 position:absolute;
 left:20px;
 top:20px;
}

将两个 div 放入 .fb_div

.facebook
{
 display: inline-block;
 margin-left:auto;
 margin-right:auto;
    color:#3b5998;
    font-family: Arial;
}
.fb_share
{
    margin-left:auto;
    margin-right:auto;
}

margin-left:auto; 和 margin-right:auto; 无法帮助我将其居中。这里是jsfiddle example

编辑：我无法将左侧位置设置为特定值，因为喜欢和分享按钮的宽度取决于文本（如果我从 USA=like 或 SLOVAK=páči sa mi 加入）

【问题讨论】：

标签： html css css-position center

【解决方案1】：

.facebook 和 .fb_share 都需要宽度。

width:80px; /*or such*/

虽然我也会从 .facebook 类中删除 display:inline-block。

http://jsfiddle.net/de10uqtf/10/

【讨论】：

但我希望左右两侧的空间相同。我无法将左侧位置设置为特定值，因为喜欢和分享按钮的宽度取决于文本/国家/地区，USA=like SLOVAK=páči sa mi to
在这种情况下你可以使用 text-align:center;如果您将 .facebok 保留为内联块，则在 .fb_div 上，但问题是 iframe，您必须使用它来控制它，我认为仅使用 CSS 无法控制 iframe 宽度，您可能必须使用 javascript，并且由于它们不在同一个域上，这可能是另一个需要克服的挑战，在这一点上，使用 Rahul 和 Joey 描述的方法可能更容易破解它，只需使其足够宽以适应两种语言..>？跨度>

【解决方案2】：

如果你打算使用绝对定位，你不妨这样做：

.facebook{margin-left: 70px; }
.fb-share{margin-left: 74px; }

http://jsfiddle.net/e9vpcok1/

【讨论】：

这行得通，但唯一的缺点是，如果他重新调整框的大小，他每次都会调整边距，认为使用 Sass 之类的东西会很容易
但我希望左右两侧的空间相同。我无法将左侧位置设置为特定值，因为喜欢和分享按钮的宽度取决于文本/国家/地区，USA=like SLOVAK=páči sa mi to

【解决方案3】：

请查找更新后的代码。

.facebook {
    display: inline-block;
    margin-left:auto;
    margin-right:auto;
    color:#3b5998;
    font-family: Arial;
    position: absolute;
    left:30%;
}
.fb_share {
    margin-left:auto;
    margin-right:auto;
    position: absolute;
    left:30%;
    top:20%;
}

JsFiddle

【讨论】：