CSS中怎么实现文本垂直居中

      #MrJin{  width:500px;  height:200px;  border:1pxsolid#03c;  text-align:center;  }     CSSWebDesign-div-css.net

      #MrJin{  width:500px;  height:200px;  border:1pxsolid#03c;  text-align:center;  line-height:200px;  }     CSSWebDesign-div-css.net

      #MrJin{  width:500px;  padding:50px0;  border:1pxsolid#03c;  text-align:center;  }     
CSSWebDesign-div-css.net
  
致力于Web标准在中国的应用及发展

[可先修改部分代码再运行查看效果]

三、如果是多行文本，父容器固定高度。

这就需要用到定位，而且需要给HTML增加标签。我们不提倡这样做。
但目前这个方法可以更好的解决问题。
在容器的内部需要增设两个容器，来实现这样的效果。
MrJin、MrJin_a和MrJin_b的设置分别如下：

ExampleSourceCode

#MrJin{  position:static;  *position:relative;  height:300px;  width:500px;  border:1pxsolid#03c;  *display:block!important;  display:table!important;  }  #MrJin_a{  position:static;  *position:absolute;  display:table-cell;  vertical-align:middle;  *display:block;  top:50%;  width:100%;  }  #MrJin_b{  position:relative;  top:-50%;  text-align:center;  width:100%;  }

这样设置以后，不管容器内的文本是一行，还是多行，都将会实现垂直居中对齐。

SourceCodetoRun

      #MrJin{  position:static;  *position:relative;  height:300px;  width:500px;  border:1pxsolid#03c;  *display:block!important;  display:table!important;  }  #MrJin_a{  position:static;  *position:absolute;  display:table-cell;  vertical-align:middle;  *display:block;  top:50%;  width:100%;  }  #MrJin_b{  position:relative;  top:-50%;  text-align:center;  width:100%;  }        CSSWebDesign-div-css.net      

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。