Centering something without margin

Question

Is it possible to center something without using margin: auto;? My div cannot be a set size because the width will change according to it's contents and even so I would not know how wide it would be since it's text inside (There is a div around text because there are multiple <p>'s). Is there any other way of aligning in center without knowing your width of the object?

div#contents {
 display: inline-block;
 margin: 50px 100px 50px 100px;
 border: 3px solid black;
}

table#socialmedia {
 height: 100px;
 margin-top: 10px;
 float: left;

}

table#support {
 height: 25px;
 margin-top: 10px;
 float: left;

}

table#external {
 margin-top: 10px;
 float: left;

}

div#footerdivider {
 width: 1px;
 height: 120px;
 margin: 0px 50px 0px 50px;
 background-color: #424242;
 float: left;
}

p.footerlinks {
 font-size: 20px;
 color: #8C8CFF;
 text-align: center;

<div id="contents">
 <table id="socialmedia">
  <tr><td><a href=""><p class="footerlinks">Facebook</p></a></td></tr>
  <tr><td><a href=""><p class="footerlinks">Twitter</p></a></td></tr>
  <tr><td><a href=""><p class="footerlinks">YouTube</p></a></td></tr>
  <tr><td><a href=""><p class="footerlinks">Steam</p></a></td></tr>
 </table>
 <div id="footerdivider">
 </div>
 <table id="support">
  <tr><td><a href=""><p class="footerlinks">Email Us (Click to copy)</p></a></td></tr>
 </table>
 <div id="footerdivider">
 </div>
 <table id="external">
 </table>
</div>

Try this - [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/) and [THE COMPLETE GUIDE TO CENTERING A DIV](http://www.tipue.com/blog/center-a-div/) — Ori Drori, Sep 17 '15 at 23:22
possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) (this post proposes a bunch of solutions, many of which don't involve `margin: 0 auto`) — Maximillian Laumeister, Sep 18 '15 at 00:58

score 1 · Answer 1 · answered Sep 17 '15 at 23:25

1

Try

div.your_element {
  display: table;
  margin: 0 auto;
}

display: table (to center a fluid div:)

margin: 0 auto (to center tables)

answered Sep 17 '15 at 23:25

Biboy

36
3

score 1 · Accepted Answer · answered Sep 17 '15 at 23:34

To center align an item without the use of margin: 0 auto;, you could use flexbox if the browsers you are working with support it.

Consider the following snippet;

.container {
    display: flex;
    justify-content: center;
    margin: 5px 0;
}
.item {
    background-color: red;
    border: 1px solid black;
}

<div class="container">
    <div class="item">Lorem ipsum dolor sit amet.</div>
</div>
<div class="container">
    <div class="item">Praesent ultrices nec quam at blandit. Pellentesque elementum ullamcorper lobortis.</div>
</div>

There is a good article on flexbox over @ css-tricks.com you can check out here.

Hope that helps you out!

score 0 · Answer 3 · answered Sep 17 '15 at 23:22

0

I'think if you set the margin to auto. It is usually working on horizontal.

div {
      margin: auto;

}

answered Sep 17 '15 at 23:22

moongom

29
2

Centering something without margin

3 Answers3