Question

我尝试使用css创建此形状并将其水平居中：http://oi64.tinypic.com/etctn8.jpg

到目前为止，我已经得到了这个：

#circlewrap { transform: rotate(45deg); margin-top: 150px; }

#circleone, #circletwo { 
  position: relative;
  display: inline-block; 
  height: 300px; 
  width: 150px; 
  background: #079491;
}

#circleone { border-radius: 300px 0 0 300px; }
#circletwo { border-radius: 0 300px 300px 0; margin-left: -1px; top: 15px; }

#circleone:after, #circletwo:before {
  content: "";  
  position: absolute; 
  width: 1px; 
  background: #079491;
}

#circleone:after { height: 500px; right: 2px; bottom: -100px; }
#circletwo:before { width: 1px; height: 380px; left: 25px; bottom: -20px; }

<html>
  <body>
    <div id="circlewrap">
      <div id="circleone"></div>
      <div id="circletwo"></div>
    </div>
  </body>
</html>

现在我如何水平居中？设置margin-right: auto;和margin-left: auto没有给我我想要的结果。

Answer 1

将width和height添加到#circlewrap

＆＃13;

#circlewrap {
  transform: rotate(45deg);
  margin-top: 150px;
  background-color: red;
  height: 350px;
  width: 350px;
  margin:0 auto;
}
#circleone,
#circletwo {
  position: relative;
  display: inline-block;
  height: 300px;
  width: 150px;
  background: #079491;
}
#circleone {
  border-radius: 300px 0 0 300px;
}
#circletwo {
  border-radius: 0 300px 300px 0;
  margin-left: -1px;
  top: 15px;
}
#circleone:after,
#circletwo:before {
  content: "";
  position: absolute;
  width: 1px;
  background: #079491;
}
#circleone:after {
  height: 500px;
  right: 2px;
  bottom: -100px;
}
#circletwo:before {
  width: 1px;
  height: 380px;
  left: 25px;
  bottom: -20px;
}

＆＃13;

<html>

<body>
  <div id="circlewrap">
    <div id="circleone"></div>
    <div id="circletwo"></div>
  </div>
</body>

</html>

＆＃13;

Answer 2

你可以设置text-align：center;到你的身体，以中心的一切。另外添加display：-webkit-inline-box;到#circlewrap。

<强> CSS：

body {text-align:center;}
#circlewrap { transform: rotate(45deg); display: -webkit-inline-box; }

#circleone, #circletwo { 
  position: relative;
  display: inline-block; 
  height: 300px; 
  width: 150px; 
  background: #079491;
}

#circleone { border-radius: 300px 0 0 300px; }
#circletwo { border-radius: 0 300px 300px 0; margin-left: -1px; top: 15px; }

#circleone:after, #circletwo:before {
  content: "";  
  position: absolute; 
  width: 1px; 
  background: #079491;
}

#circleone:after { 
  height: 500px; 
  right: 2px; 
  bottom: -100px; 
}

#circletwo:before { 
  width: 1px; 
  height: 380px; 
  left: 25px; 
  bottom: -20px; 
}

<强> HTML

<div id="circlewrap">
  <div id="circleone"></div>
  <div id="circletwo"></div>
</div>

工作小提琴：https://jsfiddle.net/rv1qr7w1/3/

Answer 3

在您尝试时添加width:303px（总width +伪元素width/position）和margin:auto。

段

#circlewrap {
  transform: rotate(45deg);
  margin: 350px auto;
  width:303px;
  border:1px solid red /* demo purposes */ 
}
#circleone,
#circletwo {
  position: relative;
  display: inline-block;
  height: 300px;
  width: 150px;
  background: #079491;
}
#circleone {
  border-radius: 300px 0 0 300px;
}
#circletwo {
  border-radius: 0 300px 300px 0;
  margin-left: -1px;
  top: 15px;
}
#circleone:after,
#circletwo:before {
  content: "";
  position: absolute;
  width: 1px;
  background: #079491;
}
#circleone:after {
  height: 500px;
  right: 2px;
  bottom: -100px;
}
#circletwo:before {
  width: 1px;
  height: 380px;
  left: 25px;
  bottom: -20px;
}

<div id="circlewrap">
  <div id="circleone"></div>
  <div id="circletwo"></div>
</div>

水平中心45度旋转div

3 个答案:

段