html - 如何使用css使div在圆形按钮内居中

Question

我想创建一个带有 x 的按钮，该按钮在圆形边框内居中。如何使 x 在圆圈内垂直和水平居中？ 我愿意接受与我提供的代码不同的方式。

非常感谢任何帮助，谢谢

https://codepen.io/glittergirl/pen/xybOzL

#mdiv {
  position: fixed;
  right: 0;
  top: 0;
  margin: 20px;
  border: 2px solid #000;
  border-radius: 16px;
  width: 34px;
  height: 34px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.mdiv {
  height:25px;
  width:3px;
  background-color: #000;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
      -ms-transform: rotate(45deg); /* IE 9 */
  Z-index:1;
}

.md {
  height:25px;
  width:3px;
  background-color:#000;
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
      -ms-transform: rotate(90deg); /* IE 9 */
          transform: rotate(90deg);
  Z-index:2;
}

Answer 1

您可以使用 left&top: 50% 和 transform: translate(-50%, -50%)

居中

有关示例，请参阅此代码笔。 https://codepen.io/anon/pen/vVEKbV