我的div不会以HTML CSS为中心

Question

我的代码

.nav_bar {
	position: absolute;
	top: 0;
	width: 800px;
	height: 23px;
	display: inline-block;
	text-align: center;
	background-color: #0090bc;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	border: 2px solid #004D6F;
	-webkit-box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.7), inset -2px -2px 0px rgba(0, 0, 0, 0.7);
	box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.7), inset -2px -2px 0px rgba(0, 0, 0, 0.4);
	padding: 10px;
	font-family: arial;
	color: white;
}

<center>
	<div class="nav_bar">
		<center><font size="5"><span class="shadow"><b>Text</b></span></font></center>
	</div>
</center>

'.nav_bar'div因某些原因不会居中！这是输出！我添加了中心标签，看看它是否会居中，但是有人请不要帮助我

输出：

Answer 1

删除

position:absolute;
top: 0;

添加

margin: 0 auto;

这是一个jsfiddle：https://jsfiddle.net/efhu4h4h/

请注意，我将宽度更改为100px，因此它适合窗口。

Answer 2

如果您想保留position: absolute您可以将这些样式添加到.nav_bar以使其居中：

left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);

Answer 3

在你的css类中添加align：center。

align:center ;

它适用于你