Search code examples
htmlcsspositioningcentering

centering an element in css circle (width and height given by ems)

hello I am trying to center an element inside a css circle. I tried few difference ways, but didn't get it working.

Here an JsFiddle example

HTML

<div class="large-columns">
        <div class="circle-holder">
                <span class="circle"><h1>h tag</h1></span>
        </div>                  
</div>

CSS

.circle {
    display: block;
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
    border-radius: 50%;
}    
    h1 {
      text-align: center;
      position: absolute;
      top: 50%;

}
Solution

  • If the to be aligned element is an inline-block, then you can do it with line-height.

    Update your CSS code to this:

    .circle {
    display: block;
    width: 10em;
    height: 10em;
    border-radius: 50%;

    line-height: 10em;
    text-align: center;

    background: red;
}

    JsFiddle Example