Positioning a div in the middle of another div

Question

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>

For starters, text-alignment should be `text-align` – Chris Brown Nov 13 '14 at 22:19 — Chris Brown, Nov 13 '14 at 22:19

score 3 · Answer 1 · answered Nov 13 '14 at 22:20

3

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>

answered Nov 13 '14 at 22:20

Christopher White

298
1
8

If this doesn't work you could be dealing with a browser that doesn't support absolute correctly. – Christopher White Nov 13 '14 at 22:21
I built something similar to your answer: http://jsfiddle.net/austinthedeveloper/wzkn29Lb/ . I'm not sure why he's saying absolute positioning wouldn't work. – austinthedeveloper Nov 13 '14 at 22:23
1

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. – Chris Brown Nov 13 '14 at 22:24
The plus looks centered to me. vertical-align and text-align make sure it's centered inside its div. – Christopher White Nov 13 '14 at 22:25
@Chris, you're right.Increasing the font size does mess it up,guess that's what happens in a mobile browser. – Akheel K M Nov 13 '14 at 22:44
@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? – Chris Brown Nov 13 '14 at 22:56
He's right about that. If you're using bootstrap you could use a span with 'glyphicon glyphicon-plus' – Christopher White Nov 13 '14 at 22:58

Chris Brown · Accepted Answer · 2014-11-13T23:06:38.230

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.

edited Nov 13 '14 at 23:06

answered Nov 13 '14 at 23:00

Chris Brown

4,445
3
28
36

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

Another option is adding display:table-cell to the parent div. This question was well hashed out with this SO question.

Here's what I ended up with: http://jsfiddle.net/117ew9Lf/

edited May 23 '17 at 12:05

Community

1
1

answered Nov 13 '14 at 22:24

Dan Hogan

468
4
16

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 Nov 13 '14 at 22:36

score 0 · Answer 4 · answered Nov 13 '14 at 22:25

0

Are you trying to align the plus inside the outer div, or the div? See this fiddle for positioning the div NOT the plus character: http://jsfiddle.net/yfLxd5zk/

#button
{
    position : fixed;
    top:0; 
    left:0;
    width : 100px;
    height : 100px;
    background-color : red;
}

#plus
{
    position : relative;
    width : 50%;
    height : 50%;
    top:25%;
    margin : 0 auto;
    background:orange;        
    text-align:center;
}

answered Nov 13 '14 at 22:25

EricBellDesigns

955
1
9
33

The plus character.I'm trying to align the plus character in the outer div – Akheel K M Nov 13 '14 at 22:29
I think Christopher White's solution will be the best. @user1095682 – EricBellDesigns Nov 13 '14 at 22:34
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. – Christopher White Nov 13 '14 at 22:48

score 0 · Answer 5 · answered Nov 13 '14 at 22:29

#button
{
    position : relative;
    width : 100px;
    height : 100px;
    border-radius:50%;
    background-color : red;
    vertical-align : middle;
    text-align : center;   
}

#plus
{

    position : absolute;
    height:20%;
    wudth:20%;
    margin : 40%;
    font-family : sans-serif;
    font-size : 40px;
    line-height:50%;
    color : black;


}

+

score 0 · Answer 6 · answered Nov 13 '14 at 22:32

Isn't this the ideal case for line-height, as the "plus" is literally a font character and the wrapper has specified dimensions?

CSS

#plus {     
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 48px;
    background: red;
}

HTML

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

http://jsfiddle.net/cibulka/d68s58xx/

score 0 · Answer 7 · answered Sep 09 '19 at 16:13

I had the same problem, I fixed it in the following way.

<div id="main_content" >
   <div id="container">
      Some Contents
   </div>
</div>

#main_content {
    top: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
    background-color: #2185C5;
    position: relative;
}

#container {
     width: 50px;
     height: 50px;
     padding: 10px;
     background-color: red;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

Output :

Positioning a div in the middle of another div

7 Answers7

CSS

HTML