Positioning a div in the middle of another div

html css css-position

17,286

Solution 1

This fiddle contains a version that maintains the central position when updating the font size. It does however depend on CSS3's translate-y. If supporting older browsers is an issue check this resource to see what browsers it is supported in. As per my comment however it's not guaranteed to be perfect due to font variations.

Solution 2

All you need was to have left and top be 25% on the plus sign

<html>

<body>
  <div id="button">
    <div id="plus">+</div>
  </div>
</body>

<style>
  #button {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: red;
  }
  #plus {
    display: block;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    font-family: sans-serif;
    font-size: 40px;
    color: black;
    vertical-align: middle;
    text-align: center;
  }
</style>

</html>

17,286

Author by

Akheel K M

Updated on June 04, 2022

Comments

Akheel K M almost 2 years

I want to position the plus symbol in the below smack in the middle of the circle. Now i tried using top , left properties. That worked only for one device. When I view the page on a smartphone, all is lost. So I need a method position without using top and left and such that moving the circle will not affect the plus(it will remain in the center).

My code :

<html>
<body>
    <div id="button"><div id="plus">+</div></div>
</body>

<style>

    #button
    {
        position : relative;
        width : 100px;
        height : 100px;
        border-radius : 100%;
        background-color : red;
    }

    #plus
    {
        display : inline-block;
        position : absolute;
        width : 50%;
        height : 50%;
        margin : auto;
        left : 5px;
        font-family : sans-serif;
        font-size : 40px;
        color : black;
        vertical-align : middle;
        text-alignment : center;    

    }
</style>

Christopher White over 9 years

If this doesn't work you could be dealing with a browser that doesn't support absolute correctly.
austinthedeveloper over 9 years

I built something similar to your answer: jsfiddle.net/austinthedeveloper/wzkn29Lb . I'm not sure why he's saying absolute positioning wouldn't work.
Chris Brown over 9 years

This isn't a particularly solid answer, the plus isn't exactly centred and any change to the font size will throw it further off centre.
Christopher White over 9 years

The plus looks centered to me. vertical-align and text-align make sure it's centered inside its div.
Akheel K M over 9 years

The plus character.I'm trying to align the plus character in the outer div
EricBellDesigns over 9 years

I think Christopher White's solution will be the best. @user1095682
Akheel K M over 9 years

huh!!!That's pretty nice.I don't know about table-cells, that's all.Seems to get the job done just fine.
Akheel K M over 9 years

@Chris, you're right.Increasing the font size does mess it up,guess that's what happens in a mobile browser.
Christopher White over 9 years

Technically since the inner div size is unrelated to the font size you want to center it in the inner div. Centering the inner div in the outer div is straightforward. That said, if you select a font size that is smaller than the containing div the css I gave you should work fine.
Chris Brown over 9 years

@user1095682 the other issue is that different fonts have different plus characters, and the heights, styles & positions of those will vary making it very difficult to perfectly centre it when viewing on different devices. Have you considered using either an image icon or font icon?
Christopher White over 9 years

He's right about that. If you're using bootstrap you could use a span with 'glyphicon glyphicon-plus'