了解定位：将绝对位置添加到 img 容器，不允许我自动保证金。为什么？

Question

我试图了解定位，我了解到当 parent 元素相对定位时，您可以绝对定位 children 元素。至少我认为我理解这一点。

我继续在 position:absolute 下面给出图片元素，但是当我这样做时，我运行遇到了一个问题，我无法在移动视图中将图像居中（使用媒体查询）。我试着正常测试居中，但我仍然无法使图像居中。我在 .img-circle 下使用了 margin-left: auto 和 margin-right:auto，但没有用。

所以我在 .picture class 上删除了 position:absolute 然后它成功了。不管怎样，我不得不 re-position 标题 class.

看来我对定位的理解有点不对，请问有人能帮我理解为什么会出现上述情况吗？我本可以做些什么来避免这样的混乱，因为我花了一段时间才弄明白。谢谢！

codepen project

/*.picture{ 
 position:absolute;
  
}*/

.img-circle{
  margin-top:10em;
  width:20em;
  height:20em;
  border:.2em solid;
  border-radius:50%;
  display:block; 
}/*image shape*/

<div class="container container-fluid contthird1">
              <div class="picture">
               <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
              </div>
              <!--end of picture-->


              <h3 id="flip">Click to slide the panel right</h3>
        
              <div class="title">
              <p class="lead">I'm a <a class="link" target='_blank' href='http://www.freecodecamp.com/map'>self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.
                <br> I'm currently part of a small web development
                <br> team in an upcoming start-up, building web and
                <br> mobile applications.
                <br>My passion is to use technology based
                <br> solutions, to help solve real world challenges.
                <br> Competences:
                <br> Languages and Frameworks:
                <br> Javascript, HTML5, CSS3, jQuery, Bootstrap3,
                <br> Angular.js, Meteor.js.
                <br> Tools & expertise:
                <br> Git, Responsive Web Design, Agile
                <br> Methodologies.</p>
              </div>

            </div>
            <!--end of container-->

Answer 1

边距适用于 relative/static 元素。对 absolute/fixed 元素使用边距是没有意义的，因为边距在同一文档流中的元素之间起作用。当您放置 position absolute 时，您将超出文档的正常流程。所以你需要另一种解决方案来集中它。这是一个简单的全局完美中心的示例，无需预先知道元素的大小：

 .img-circle {
     position: absolute;
     left: 50%;
     -webkit-transform: translateX(-50%); /* for iOS devices*/
     transform: translateX(-50%);
 }

看到它有效：

http://codepen.io/anon/pen/NNPLgw

Answer 2

要回答您的问题，您需要使用 left/right、margin-left/right 和 width 使用绝对定位使元素居中。

.picture { 
  position: relative; 
}

.img-circle {
  margin-top: 2em;
  height:20em;
  border:.2em solid;
  border-radius:50%;
  display: block; 
  position:absolute;
  /* to vertically center an absolute positioned element below is needed  */
  width: 20em;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;  
}

<div class="container container-fluid contthird1">
  <div class="picture">
    <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
  </div>
  <!--end of picture-->


</div>
<!--end of container-->

因此，即使可行，也可能不是最佳解决方案。 @Marcos 建议的更好，或者像下面这样使用 text-align: center

.picture { 
  position: relative;
  text-align: center;
}

.img-circle {
  margin-top: 2em;
  width: 20em;
  height:20em;
  border:.2em solid;
  border-radius:50%;
}

<div class="container container-fluid contthird1">
  <div class="picture">
    <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
  </div>
  <!--end of picture-->


</div>
<!--end of container-->

了解定位：将绝对位置添加到 img 容器，不允许我自动保证金。为什么？

Understanding positioning: adding position absolute to img container, doesn't allow me to margin auto. Why?

css

margin

css-position