html - 使用 margin : auto; is not centering div

Question

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 来制作这个网站，我不知道这是否有问题。我尝试在左侧添加边距百分比，但这在移动屏幕上效果不佳。

非常感谢您的帮助。谢谢!

Answer 1

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

工作样本:https://jsfiddle.net/3xhn73ct/1/

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