Html 在水平和垂直方向上使Div居中

我有一个类似于：

<div class='number'><div class='n'><span>1</span></div></div>

现在，我想把它放在下图的中心。我怎么做

Jsfiddle：

这里有一个

---

仅供参考，在这里您可以找到一些css中垂直对齐的技巧。 有很多事情你可以尝试，不仅仅是这个案例，还有未来的案例。我希望它能帮助你。祝你好运

您的编号CSS类：

.number{
background:green;
text-align:center;   
width:70px;
line-height:70px; 
height:70px; 
box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;-moz-box-sizing:border-box;
}

.number .n{width:40px; 
height:40px; 
vertical-align:baseline; 
line-height:40px; 
margin:0 auto; 
border-radius:50%; 
background:#e54e53;
display:inline-block;
}

---

后桥什么的，please@Notulysses：刚更新您还没有添加css类在这里：。如果不是您想要的，那么请更具体一些。@user2728514-对不起？你一无所有，我给你一些东西，然后你批评我的代码？走开。很高兴能帮助你：如果有帮助，请把我的解决方案标记为答案。

.number{
background:green;
text-align:center;   
width:70px;
line-height:70px; 
height:70px; 
box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;-moz-box-sizing:border-box;
}

.number .n{width:40px; 
height:40px; 
vertical-align:baseline; 
line-height:40px; 
margin:0 auto; 
border-radius:50%; 
background:#e54e53;
display:inline-block;
}