保证金值不适用于具有float none属性的div

Question

我想以div为中心。我使用保证金和浮动属性这样做..但保证金值不能正常工作

.body {
  width: 100%;
  float: left;
}
.content {
  width: 70px;
  margin: 10px auto 10px auto;
  float: none;
  border:1px solid red;
}
.content p{float:left;margin:0;}

<div class="body">
     <div class="container">
       <div class="content"><p>hello all<p></div>
    </div>
</div>

这里边缘的顶部和底部值（即10px）不能正常工作。底部值从顶部开始，应该从底部开始！

Answer 1

最好不要以浮动为中心，因为它会将元素从正常文档流中取出。中心有保证金＆＃39; auto＆＃39;代替。

HTML

 <div class="body">
   <div class="content">hello all</div>
 </div>

CSS

 .body{
  width: 100%;
 }
 .content{
 display:block;
 width: 70px;
 margin: 10px auto;
 }

Answer 2

您可以尝试：

body{
 margin:0px;
}

.container{
   width: 100%;
}
.content{
   display:block;
   width: 70px;
   margin: 10px auto;
}