How to make a cross sign red circle with CSS

I want to make cross sign (X) in a red circle.

Here is my try:

.crosssign {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.crosssign_circle {
    position: absolute;
    width:22px;
    height:22px;
    background-color: red;
    border-radius:11px;
    left:0;
    top:0;
}

.crosssign_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#fff;
    left:11px;
    top:6px;
}

.crosssign_stem2 {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#fff;
    right:11px;
    top:6px;
}

But it looks like this:

So how can I place the stem in the right order to make the X sign?

And the HTML is also here:

<span class="crosssign">
<div class="crosssign_circle"></div>
<div class="crosssign_stem"></div>
<div class="crosssign_stem2"></div>
</span>

Solution

One of the reason why your stems are not appearing as they should is because you forgot to add position: relative to the parent .crosssign element. There is an easier way to get about this:

Use the top: 50%; left: 50%; transform: translate(-50%, -50%) trick to vertically and horizontally center the stems
Ensure that stem and stem2 have their width and height flipped (so that they appear 90deg rotated relative to each other)
Apply transform: rotate(45deg) on the parent element

Moreover, you do not need to add vendor prefixes to CSS transform: all browsers today (even IE11) supports the unprefixed version.

Here is a proof-of-concept example:

.crosssign {
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
  transform: rotate(45deg);
}

.crosssign_circle {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: red;
  border-radius: 11px;
  left: 0;
  top: 0;
}

.crosssign_stem,
.crosssign_stem2 {
  position: absolute;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crosssign_stem {
  width: 3px;
  height: 9px;
}

.crosssign_stem2 {
  width: 9px;
  height: 3px;
}

<span class="crosssign">
  <div class="crosssign_circle"></div>
  <div class="crosssign_stem"></div>
  <div class="crosssign_stem2"></div>
</span>