Centering plus/minus toggle element inside a circle

Question

I have 2 elements that represent +/- signs, When the two elements are visible they represent +, On clicking the vertical element disappears and it becomes -.

Both + and - signs are inside a circle, I want to center both vertical and horizontal elements inside that circle.

Here is a fiddle: http://jsfiddle.net/9ek3gt7o/10

The HTML:

<span class="plusminussign closed">
     <div class="circle">
         <div class="horizontal"></div>
         <div class="vertical"></div>
     </div> <!-- .circle -->
</span> <!-- .plusminussign -->

The CSS:

.plusminussign{
    position: relative;
    display:inline-block;
    height: 24px;
    width: 24px;
    vertical-align: bottom;
    opacity: .7;
    background: green;
    border-radius: 50%;
    color: #fff;
    margin: 10px auto;
    cursor: pointer;
}

.circle .horizontal {
  position: absolute;
    background-color: #fff;
    width: 15px;
    height: 2.5px;
    left: 50%;
    top: 50%;
}

.circle .vertical {
  position: absolute;
    background-color: #fff;
    width: 2.5px;
    height: 15px;
    left: 50%;
    top: 50%;
}

.closed .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
  opacity: 1;
}

.closed .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

.opened {
  opacity: 1;
}

.opened .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
  opacity: 0;
}

.opened .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

On clicking, The class opened will be added to the container .plusminussign .

jQuery:

$('.plusminussign').on('click', function(){
    $(this).toggleClass('opened');
});  

I want a x-browser compatible responsive solution, So that I won't lose the positioning if the screen gets smaller.

How to center both horizontal and vertical elements inside the circle?

Answer 1

To center something you have a few solutions:

Negative margins

Works in older browsers and newer browsers, but you have to hardcode with height / width

.circle{
    position: relative;
    height: 100px;
    width: 100%;
    border-radius: 50%
}

.plus-vert{
    height: 50px;
    width: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -1px;
}

.plus-horiz{
    height: 2px;
    width: 50px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1px 0 0 -25px; 
}

Top/left values puts the top left corner of your line in the center of the circle. The negative margin shifts the line back halfway on each access which centers the item. This works in older browsers, but is less than ideal since you have to hardcode height/width.

CSS3 Transform

This is mostly similar to the previous method, except you use transform to shift it back halfway instead of negative margins.

.circle{
    position: relative;
    height: 100px;
    width: 100%;
    border-radius: 50%
}

.plus-vert{
    height: 50px;
    width: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.plus-horiz{
    height: 2px;
    width: 50px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); 
}

This is only compatible with CSS3 enabled browsers and has the benefit of not caring what the height/width are since it's in %'s.

Flex Box

This uses the flex box layout to center things

.circle{ display: flex; justify-content: center; align-items: center; height: 100px; width: 100%; border-radius: 50% }

.plus-vert{
    height: 50px;
    width: 2px;
    background-color: #fff;
}

.plus-horiz{
    height: 2px;
    width: 50px;
    background-color: #fff; 
}

This has the benefit of the taking all the layout logic from the children and putting it on the parent.

They should all be good, just depends on what browsers you want to support.