鍍金池/ 問(wèn)答/Java  HTML/ css文字上下居中

css文字上下居中

當(dāng)前要實(shí)現(xiàn)一個(gè)文字上下居中的效果，一般采取的方法是line-height等于當(dāng)前div的高度，如果這個(gè)div的高度是不確定的，該如何實(shí)現(xiàn)。

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

謝謝!!

回答
編輯回答
背叛者

<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>
2017年1月15日 06:14
編輯回答
痞性

再用一個(gè)div包裹

<div class="d1">
    <div class="d2">文字</div>
 </div>
.d1{
display:flex;
justify-content:center;
flex-direction:column;
}
.d2{
width:80%;
text-align:center;
}
2017年9月27日 19:41
編輯回答
離魂曲

可以通過(guò)js獲取動(dòng)態(tài)的高度，然后給他加動(dòng)態(tài)的line-height的值，

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

只要這個(gè)高度變化，line-height值就會(huì)跟著變化

2018年4月21日 09:37
編輯回答
神曲

第一種轉(zhuǎn)化為行內(nèi)元素display:inline-block; vertical-align;第二種使用flex, display:-webkit-box; -webkit-box-pack:center;-webkit-box-align:center;類(lèi)似還可以使用display:table-cell; vertical-align;網(wǎng)上方案很多。

2018年6月18日 02:30
編輯回答
枕頭人

首先你說(shuō)的高度不確定不知道是會(huì)隨時(shí)變，還是會(huì)根據(jù)內(nèi)容的多少每一次加載都不一樣。
當(dāng)你不知道高度會(huì)被撐開(kāi)多少的時(shí)候，不要設(shè)置高度為多少，而是去設(shè)置上下的padding，這樣看起來(lái)文字是永遠(yuǎn)居中的。
其他的方法也可以使用css3的新特性，或者less和sass，可以在css樣式里定義變量，定義一個(gè)高度的變量，再把它應(yīng)用到行高。
最后一種方法就是完全不知道div高度的情況下，只能使用js在渲染頁(yè)面的時(shí)候進(jìn)行獲取了。

var lineH=document.getElementsByClassName('css')[0].offsetHeight;
document.getElementsByClassName('css')[0].style.lineHeight=lineH+"px";
2018年6月29日 09:18
編輯回答
孤毒
<article>
   我是要居中的文字
</article>

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

demo

2018年2月20日 10:33