将div中的所有元素居中，但文本在css中是合理的

Question

这是我的尝试，但div包装器并不是内容div的中心。 我有一个包含ang盒形状的div和另一个带有文本的div。

.wrapper {
  position:absolute;
    left: 50%;
}

.content {
    width:90%;
text-align:justify;
    left: -50%;
    display: inline-block;
}

.button {
text-align:center;
}


<div class="wrapper">

<div name="box" style="background-color:#FF6201;width:220px;height:220px;:30px">
   <div class="content">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,<button class="button">
   weee</button>
</div>

</div>

</div>

我实际上可以通过添加标签来做html，但我希望在css中完成此操作。请帮助。

Answer 1

我一时间发现了这个漂亮的伎俩：

margin-left: 50%;
transform: translate(-50%)

这将使任何静态定位的Div居中。我假设你想让盒子居中;如果是这样的话，我会移动这个类=＆＃34;内容＆＃34;到该元素，然后将您的CSS修改为以下内容：

.content {
 width:90%;
 margin-left: 50%;
 text-align:justify;
 transform: translate(-50%) 
}

这是一个小提琴链接，看看这是不是你想要的：https://jsfiddle.net/e3tsj8qf/5/

修改 下面引用的小提琴代码（接受为答案）：

 .box {
  background-color:#FF6201;
  width:220px;
  height:220px;
}

.content {
    width:90%;
    text-align:justify;
    margin-left: 5%;
}

.centered {
  text-align:center;
}
<div class="box" name="box">
   <div class="content">
   Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,
   </div>
   <div class="centered">
      <button class="button">weee</button>
   </div> 
</div>

Answer 2

尝试使用此代码标记和样式.....

＆＃13;

＆＃13;

*{box-sizing:border-box};
*{margin:0;padding:0}
.wrapper {
  position: absolute;
  left: 50%;
  transform:translate(-50%);
}

.content {
  width: 85%;
  text-align: center;
  display: block;
  margin:0 auto;

}

.button {
  text-align: center;
}

＆＃13;

<div class="wrapper">

  <div name="box" style="background-color:#FF6201;width:220px;height:220px;">
    <div class="content">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,<button class="button">
   weee</button>
    </div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;