css文字上下居中

Question

当前要实现一个文字上下居中的效果，一般采取的方法是line-height等于当前div的高度，如果这个div的高度是不确定的，该如何实现。

.ccs {
    width: 100%;
    height: inherit;
    background-color: blueviolet;
    float: left;
    line-height:???;
}

谢谢!!

Answer 1

<article>
   我是要居中的文字
</article>

article{
  height:100px;/*加上高度比较直观*/
  display:flex;
  align-items:center;
  background-color:green;
}

demo

Answer 2

首先你说的高度不确定不知道是会随时变，还是会根据内容的多少每一次加载都不一样。
当你不知道高度会被撑开多少的时候，不要设置高度为多少，而是去设置上下的padding，这样看起来文字是永远居中的。
其他的方法也可以使用css3的新特性，或者less和sass，可以在css样式里定义变量，定义一个高度的变量，再把它应用到行高。
最后一种方法就是完全不知道div高度的情况下，只能使用js在渲染页面的时候进行获取了。

var lineH=document.getElementsByClassName('css')[0].offsetHeight;
document.getElementsByClassName('css')[0].style.lineHeight=lineH+"px";

Answer 3

再用一个div包裹

<div class="d1">
    <div class="d2">文字</div>
 </div>
.d1{
display:flex;
justify-content:center;
flex-direction:column;
}
.d2{
width:80%;
text-align:center;
}

Answer 4

可以通过js获取动态的高度，然后给他加动态的line-height的值，

 var ww= $("#aa").height()
 $("#aa").css("line-height",ww+"px")

只要这个高度变化，line-height值就会跟着变化

Answer 5

<style>

.content {
    position: relative;
    height: 50px
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

</style>
<div class="content">

    <div class="child">
        222
    </div>
</div>

Answer 6

第一种转化为行内元素display:inline-block; vertical-align;第二种使用flex, display:-webkit-box; -webkit-box-pack:center;-webkit-box-align:center;类似还可以使用display:table-cell; vertical-align;网上方案很多。