Center DIV on DIV with CSS

Question

I am trying to create a very simple button in CSS, but am unable to get the arrow in my button to be in the center of my circle.

I used:

top: 50% left: 50%

to try and center my arrow div inside of my circle div, but of course this only centers the top left corner of my arrow div, and not the center position.

How can I center my div perfectly inside of the div? I would ideally like a solution where I the width and height of both divs does not matter, so I can easily change them at a later date.

My current code: http://jsfiddle.net/zhWGx/

jsfiddle.net/zhWGx/3

Andrew Matthew
– Andrew Matthew

2014-07-10 09:50:47 +00:00
Commented Jul 10, 2014 at 9:50 — Andrew Matthew
– Andrew Matthew, Commented Jul 10, 2014 at 9:50

Brian Coolidge · Accepted Answer · 2014-07-10 09:50:31Z

Try this one, make your triangle position:absolute, then top, left bottom, right will be 0. Make it margin:auto. Then you're done.

.triangle { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent transparent transparent red; position: absolute; top: 0; left: 0; right:0; bottom:0; margin:auto; }

Link: http://jsfiddle.net/Vigiliance/zhWGx/4/

P.S.

You will curse IE, when you use this method.

Mike Vranckx · Accepted Answer · 2014-07-10 09:58:45Z

If you want to able to center an element with unknown dimensions, you can use transformations (translate) on that element.

transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);

http://jsfiddle.net/zhWGx/23/

Note that this is only supported on modern browser.

Indeed, as long as you don't need to support Internet Explorer 7 & 8, this is an easy solution and will work in each situation.

Fabien Papet · Accepted Answer · 2014-07-10 09:50:22Z

You can try this, if your circle has always the same size : http://jsfiddle.net/zhWGx/1/

.triangle { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17.3px; border-color: transparent transparent transparent #ffffff; position: relative; display: block; margin: 10px auto ; top: 10px; }

Izekid · Accepted Answer · 2014-07-10 09:56:12Z

This should fix it

 .triangle { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17.3px; border-color: transparent transparent transparent #ffffff; background:linear-gradient(transparent, transparent, transparent, #FFFFFF); position: relative; margin-left: 15px; top:24% }

Oliboy50 · Accepted Answer · 2014-07-10 09:55:25Z

http://jsfiddle.net/Oliboy50/zhWGx/14/

If you want to adjust the triangle position the way you want :

.triangle { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17.3px; border-color: transparent transparent transparent #ffffff; position: absolute; /* absolute (the parent is relative) */ top: 50%; left: 50%; margin-top: -10px; /* triangle height/2 */ margin-left: -6px; /* triangle width/2 (6.85px) or what you want */ }

DragonK · Accepted Answer · 2014-07-10 09:59:41Z

You can try:

.triangle { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17.3px; border-color: transparent transparent transparent #ffffff; position: relative; top: 25%; left: 40%; }

iamawebgeek · Accepted Answer · 2014-07-10 10:01:25Z

If there is only text inside of your div you can do:

.inside-div { display: inline: // for IE display: inline-block; text-align: center; }

Otherwise:

.parent-div { position: relative; } .inside-div { position: absolute; left: 50%; top: 50%; width: 500px; margin-left: -250px; height: 500px; margin-top: -250px; }

Something like this http://jsfiddle.net/zhWGx/27/, but in this sutiation you should calculate geomethric position of triangle and than set margins.

Collectives™ on Stack Overflow

Center DIV on DIV with CSS

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Hot Network Questions