Question

目标：

我有一个容器和一个圆形主题容器，它将包含主题细节。

问题：

主题div不是水平居中

CSS

.user_body_content_container
{
 display: table;  
}

.subject_container  
 {
 width: 200px;
 height: 250px;
 border: 1px solid #eee;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

.subject
{
 border-radius: 50%;
 border: 1px solid #653;
 width: 175px;
 height: 175px;
 margin: auto; 
 position: relative;
 overflow:hidden;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

.subject div
{ 

}
.subject .subject_completion
{

}

我不想单独使用解决方案，我认为这种设计太可怕了。如果您发现我的设计有任何问题，请告诉我

Answer 1

有一种方法可以让您垂直对齐您的主题，而无需填充，边距和表格。 jsfiddle

基本想法是使用:before（或:after）和display: inline-block元素，如下所示：

.subject:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}

.subject_data {
  display: inline-block;
  vertical-align: middle;    
 }

 <div class="subject">
     <div class="subject_data">
        <div class="subject_name">Subject</div>
        <div class="subject_completion">55%</div>                
     </div>
 </div>

上述方法是跨浏览器，因为所有browsers都支持伪元素:before，:after。

Answer 2

这是一个可能的解决方案：

.subject
{
    border-radius: 50%;
    border: 1px solid #653;
    width: 175px;
    height: 175px;
    margin: 0 auto; 
    position: relative;
    overflow:hidden;
    text-align: center;
    padding-top: 66px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

UPD：这是另一个：JSFiddle

HTML

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell">
      <div class="inner-table">
        <div class="circle">  
          <div class="subject_name">Subject</div>
          <div class="subject_completion">55%</div>
        </div>
      </div>
    </div>
    <div class="cell"></div>
  </div>
</div>

CSS

.table {
    display: table;
    width: 200px;
    height: 250px;
}
.row {
    display: table-row;
}
.cell {
    background-color: yellow;
    display: table-cell;
    width: 10%;
    vertical-align: middle;
}
.inner-table {
    display: table;
    width: 175px;
    height: 175px;
}
.circle {
    display: table-cell;
    border-radius: 50%;
    border: 1px solid #653;
    overflow:hidden;
    vertical-align: middle;
    text-align: center;
}

UPD 2：还有一个：JSFiddle

HTML

<div class="rectangle">
  <div class="circle">
    <div class="name">Subject</div>
    <div class="load">55%</div>
  </div>
</div>

CSS

.rectangle {
    background-color: yellow;
    padding: 37px 13px;
    width: 200px;
    height: 250px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.circle {
    border: 1px solid gray;
    border-radius: 50%;
    width: 175px;
    height: 175px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

UPD 3：更短的版本

.rectangle {
    background-color: yellow;
    width: 200px;
    height: 250px;
    border-spacing: 12px 37px;
    border-collapse: separate;
}

Answer 3

如果你瞄准css3并且不必担心浏览器兼容性，这是一个简单的解决方案：

已更新

＆＃13;

.user_body_content_container {
    display: table-cell;
    border: 1px solid #000000;
    width: 250px;
    height: 250px;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

.subject_container
{
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    border-radius: 250px;
    vertical-align: middle;
}

.subject {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
}

.subject_name
{
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.subject_completion {
    display: inline-block;
    position: absolute;
    top: 55%;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}

＆＃13;

<div class="user_body_content_container">
    <div class="subject_container" id="subject_container0" index="0">
        <div class="subject" index= "0">
            <div class="subject_name">Subject</div>
            <div class="subject_completion">55%</div>
        </div>
    </div>
</div>

＆＃13;

Answer 4

我建议你这样做，demo

<div class="subject_name">
    Subject
    <span class="subject_completion">55%</span>
</div>

.subject_name span{
    display:block;
    text-align:center;
}

嵌套中心和垂直对齐

4 个答案: