CSS - 在里面创建一个带有垂直对齐文本的圆形DIV

Question

我想用bootstrap 3创建一个圆形DIV，并尝试在垂直居中设置一些文本，但我不能......

这是HTML

<div class="circle">
<div>
<span>Info</span><br/>
<span class="big">1000</span>
</div>
</div>

用这个css

.circle{
    border-radius:50%;
    border: 3px solid #fff;
    background-color:red;
    display:table;
    width:100%;
    height:auto;    
    padding-top:100%;

}

.circle > div{
    display: table-cell;
    vertical-align: middle;
}

.big {
  font-size:30px;
}

如果我没有放入任何文字，那么这个圆圈是完美的，文字会变成椭圆形......在这里你可以找到它的小提琴

Fiddle

Answer 1

您可以使用flexbox：

.circle {
  border-radius: 50%;
  border: 3px solid #fff;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.circle:after {
  content: '';
  padding-bottom: 100%;
}

.big {
  font-size: 30px;
}

<div class="circle">
  <div class="circle-inner">
    <span>Info</span><br/>
    <span class="big">1000</span>
  </div>
</div>

Answer 2

试试这个：

小提琴：https://jsfiddle.net/intervalia/jhz1xvcL/1/

＆＃13;

＆＃13;

.circle{
	border-radius:50%;
	border: 3px solid #fff;
	background-color:red;
	display:table;
	width:100%;
	height:auto; 	
	padding-top:100%;
	position: relative;
}

.circle > div{
	display: flex;
	align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.big {
  font-size:30px;
}

＆＃13;

<div class="circle">
<div>
<span>Info</span><br/>
<span class="big">1000</span>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;