水平和垂直居中的Div

Question

我有一个HTML：

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

现在，我想像下面的图像一样居中。我该怎么办？

Jsfiddle：link

Answer 1

这是 FIDDLE

.number {
  background: green;
  position: relative;
  width: 200px;
  height: 200px
}
.n {
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-radius: 100%;
}

Answer 2

仅供参考，你可以在这里找到一些css中垂直对齐的技巧。 http://www.vanseodesign.com/css/vertical-centering/ 你可以尝试不少的东西，不仅仅是针对这种情况，而是针对未来的情况。我希望它对你有所帮助。祝你好运！

Answer 3

您的号码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;
}

http://jsfiddle.net/Arxcm/4/