How to center a component without knowing its width in Css

Question

How to center a component without knowing its width value. I know that you can position a component in the center by writing this in css:

Width: componentWidth; 
margin: auto;

But in my case it's a generic style (given to different kind of buttons with different with value).

Any Help will be appreciated

Check this other thread http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width — Chris Sullivan, May 05 '16 at 08:22

score 4 · Accepted Answer · answered May 05 '16 at 08:31

I'd suggest using display:flex and justify-content:center on your container.

For example

HTML

<div class="container">
  <span class="content">Center!</span>
</div>
<hr />
<div class="container2">
  <span class="content2">Center 2!</span>
</div>

CSS

.container {
  display:flex;
  justify-content:center;
  border:solid 1px red;
}

.container2 {
  display:flex;
  height:200px;
  justify-content:center;
  align-items:center;
  border:solid 1px red;
}

Fiddle here

The second container is an example of how to vertically center something, as an added bonus.

Mr. Alien · Answer 2 · 2016-05-05T08:25:20.710

2

margin: auto; will work when you have some fixed width defined to your element, if you have dynamic width, you can use transform: translateX(-50%); to center your element horizontally(which I assume is what you want) or you can add translateY(-50%) if you want to center vertically.

For example:

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  /* specifying x and y separately on purpose so that you understand whats going 
     on and what you can remove what you don't need from the above snippet */
}

Demo

If you want just horizontal centered element, get rid of top: 50% and translateY(-50%) respectively. Just note that it's a good practice to nest your absolute positioned element inside relative positioned element.

edited May 05 '16 at 08:25

answered May 05 '16 at 08:21

Mr. Alien

153,751
34
298
278

That works, but not for all browsers (Safari for instance) – Anthony E May 05 '16 at 08:21
1

This is the correct answer. To make safari compatible, use `-webkit-transform: translate(-50%, -50%);` – Marcos Pérez Gude May 05 '16 at 08:24

score 1 · Answer 3 · answered May 05 '16 at 08:20

In order for margin: auto to work, you must also have block as the display type. The display type for links and buttons is inline-block by default, so override this with display: block; in your style:

.whatever-your-btn-class-is {
  margin: auto;
  width: componentWidth;
  display: block;
}

score 1 · Answer 4 · answered May 05 '16 at 08:54

You can do it without CSS or knowing an elements size using a table if you want to get old school.

<table width="100%">
<tr>
    <td align="center"><!-- anything in here will be centered --></td>
</tr>
</table>

Here's an example

https://jsfiddle.net/gxyyecdy/

How to center a component without knowing its width in Css

4 Answers4