Html 水平中心45度旋转div

我正在尝试使用css创建此形状并将其水平居中：

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

#circlewrap{变换：旋转（45度）；边距顶部：150px；}
#circleone，#circletwo{
位置：相对位置；
显示：内联块；
高度：300px；
宽度：150px；
背景#079491；
}
#circleone{边界半径：300px 0 300px；}
#圆圈二{边框半径：0 300px 300px 0；左边距：-1px；顶部：15px；}
#circleone:之后，#circletwo:之前{
内容：“；
位置：绝对位置；
宽度：1px；
背景#079491；
}
#circleone:在{高度：500px；右侧：2px；底部：-100px；}之后
#圆圈二：在{宽度：1px；高度：380px；左侧：25px；底部：-20px；}之前

---

将

宽度

和

高度

添加到

#圆圈

#圆圈{
变换：旋转（45度）；
边缘顶部：150px；
背景色：红色；
高度：350px；
宽度：350px；
保证金：0自动；
}
#塞拉利昂，
#圆圈二{
位置：相对位置；
显示：内联块；
高度：300px；
宽度：150px；
背景#079491；
}
#塞利昂{
边界半径：300px 0 300px；
}
#圆圈二{
边界半径：0 300px 300px 0；
左边距：-1px；
顶部：15px；
}
#circleone:之后，
#第二圈：之前{
内容：“；
位置：绝对位置；
宽度：1px；
背景#079491；
}
#克利里昂：之后{
高度：500px；
右：2px；
底部：-100px；
}
#第二圈：之前{
宽度：1px；
高度：380px；
左：25px；
底部：-20px；
}

---

您可以设置文本对齐：居中；以你的身体为中心。另外添加显示：-webkit内联框；给你的圆圈

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>

---

工作小提琴：

如果我想添加一个标题并将其水平和垂直居中，最好的方法是什么？由于div是旋转的-设置

位置：绝对顶部：50%左：50%
转换：翻译（-50%，-50%）到标题不居中（标题“转义”到中间）