html - 无边距居中

Question

是否可以在不使用 margin: auto; 的情况下将某些东西居中？我的 div 不能是固定大小，因为宽度会根据它的内容而改变，即使这样我也不知道它会有多宽，因为它里面是文本(文本周围有一个 div，因为有多个 <p> 的)。在不知道物体宽度的情况下，是否还有其他居中对齐方式？

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>

Answer 1

要不使用 margin: 0 auto; 居中对齐一个元素，如果您使用的浏览器支持它，您可以使用 flexbox。

考虑以下片段；

.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>

@css-tricks.com 上有一篇关于 flexbox 的好文章，你可以查看 here .

希望对您有所帮助!