使用保证金：自动；没有居中 div答案

【问题标题】：Using Margin: auto; is not centering div使用保证金：自动；没有居中 div
【发布时间】：2017-03-19 14:16:55
【问题描述】：

Margin: auto; 不在此<div class="users"> 的中心。

    .users {
        margin: auto;
    }
    
    .admin {
        margin: 5px;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
        box-shadow: 2px 2px 1px grey;
        background: white;
        background: -webkit-linear-gradient(#fff , #F1F1F1);
        background: -o-linear-gradient(#fff , #F1F1F1);
        background: -moz-linear-gradient(#fff , #F1F1F1);
        background: linear-gradient(#fff , #F1F1F1);
    }
    
    .admin img {
        display: block;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
        max-width: 100%;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: 2px 2px 1px grey;
    }
    
    .info {
        position: relative;
        background-color: #E0E0E0;
    }
    
    .info h1 {
        padding-top: 10px;
    }
    
    .info h3 {
        margin-top: 0px;
        padding-bottom: 10px;
    }
    
    .info h1, h3 {
        margin-left: 10px;
    }

        <div class="users">
        				<div class="aboutrow">
        					<div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                        </div>	
                        <div class="aboutrow">
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                        </div>
            </div>

我正在使用 bootstrap 来制作这个网站，我不知道这是否会影响它。我尝试在左侧添加一个边距百分比，但这在移动屏幕上效果不佳。

我们将不胜感激。谢谢！

【问题讨论】：

居中 div 不是自动边距，您的 div 应该有一个宽度，然后执行 margin:0 auto;。

标签： html twitter-bootstrap css margin

【解决方案1】：

对于居中，我们应该有一个width，然后使用margin:0 auto;

工作示例：https://jsfiddle.net/3xhn73ct/1/

.users {
  width:50%;
  margin:0 auto;
}

【讨论】：

不幸的是，这会缩小 .admin div。

【解决方案2】：

默认情况下，div 是 block 元素，因此默认宽度为 100%。即使您将边距设置为auto，元素也不会居中，因为它已经占用了所有可用空间。

你可以明确地给你的元素一个宽度，或者将它的显示设置为inline-block，以便它只占用它需要的空间，并将父元素的文本对齐设置为center。

【讨论】：

添加文本对齐到 div？
如果子 div (.users) 设置为 inline-block，则将 text-align 设置为 parent 的中心将使 .users div 居中。

【解决方案3】：

您需要在 .users 上设置一个宽度，这将使整个 div 居中。

.users{
  width:500px; /* for example */
  margin:0 auto;
}

如果你只是想把 .users 的内容居中，你需要做这样的事情

.users > div {
   width:500px; /* for example */
   margin: 0 auto;
}

此外，由于您使用的是引导程序，因此您应该在包装 div 中添加一个 .container 类。这将为您提供页边距。

【讨论】：

我认为使用 px 在移动设备上效果不佳。我不确定你说的最后一部分是什么意思

【解决方案4】：

您需要在其中添加“位置：相对”：

.users {
    margin: 0 auto;
    position: relative;
}

这仅适用于水平居中。

对于垂直居中，您需要添加

.users {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

为此，.users 的父元素需要具有定义的高度。

【讨论】：

【解决方案5】：

不确定，如果你想要这样的东西

.users {
  display: flex;
  width: 500px;
  justify-content: center;
  margin: auto;
}
.admin {
  margin: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  box-shadow: 2px 2px 1px grey;
  background: white;
  background: -webkit-linear-gradient(#fff, #F1F1F1);
  background: -o-linear-gradient(#fff, #F1F1F1);
  background: -moz-linear-gradient(#fff, #F1F1F1);
  background: linear-gradient(#fff, #F1F1F1);
}
.admin img {
  display: block;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  max-width: 100%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 1px grey;
}
.info {
  position: relative;
  background-color: #E0E0E0;
}
.info h1 {
  padding-top: 10px;
}

<div class="users">
  <div class="aboutrow">
    <div class="col-md-3 sub admin">
      <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
      <div class="info">
        <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                        </div>	
                        <div class="aboutrow">
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
        						<div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
        					</div>
                        </div>
            </div>

希望对你有帮助

【讨论】：

【解决方案6】：

为.users CSS 选择器添加width 属性，以使块居中。

示例 1：jsFiddle

.users
{
    width:50%;
    margin:auto;
}

---或--

许多其他方法之一是通过将table 的body 属性赋予一定百分比宽度和主体内的块，即div.users 作为table cell。

示例 2：jsFiddle

.users {
    display:table-cell;
    vertical-align: middle;
}

body {
    width:50%;
    display:table;
    margin:auto;
}

这两个似乎在移动屏幕上也能正常工作（需要放大一点）。

【讨论】：

第一个使 .admin div 非常小。所以我添加了一个“宽度：24%”，这在移动设备上不起作用。第二个选项根本不起作用。第一个选项只需要一些调整，它会起作用
@Qwerty-Space ：我检查了示例（jsFiddle）。这不是您想要将.users 块居中的内容吗..
是的，但它在实践中不起作用。不过我已经修好了。
@Qwerty-Space : 24% width 适用于大屏幕，但对于移动屏幕看起来非常小...虽然我们可以缩放*，但我建议您使其具有响应性...

【解决方案7】：

好的，我修复它的方法是更改 HTML 和 CSS

从<div class="col-md-3 sub admin"> 到<div class="col-sm-3 admin"> 我不完全确定这是否有所贡献，但是¯_(ツ)_/¯

然后我将 CSS 更改为

.users {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;

}

.admin {
    max-width: 410px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px; 
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    box-shadow: 2px 2px 1px grey;
    background: white;
    background: -webkit-linear-gradient(#fff , #F1F1F1);
    background: -o-linear-gradient(#fff , #F1F1F1);
    background: -moz-linear-gradient(#fff , #F1F1F1);
    background: linear-gradient(#fff , #F1F1F1);
}

唯一的问题是它在平板电脑大小的屏幕上看起来有点时髦，而且它不是完全集中的。不过，它现在有效。

【讨论】：

【解决方案8】：

如果你想使用margin: auto; 使一个 div 居中，你需要明确地给 div 一个“宽度”，最重要的是，如果你想看到它工作，你必须让宽度小于屏幕宽度。

【讨论】：

【解决方案9】：

使用以下，它会工作：

.用户

{
文本对齐：居中；

}

【讨论】：