div中內(nèi)容垂直居中(常用的方法)

1、單行文字顯示

<div class="main">
    水平垂直居中div演示效果
</div>
.main{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

2、多行未知高度文字顯示

<div class="main">
    水平垂直居中div演示效果.....
</div>
.main{
    width: 100%;
    padding: 25px;
    text-align: center;
}

3、帶有圖片和文字顯示

<div class="main">
    <p>declan</p>
    <img src="pic_2.png"/>
</div>
.main{
    width: 100%;
    padding: 25px;
    text-align: center;
}

4、固定高度重的內(nèi)容顯示（見完美解決方案）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,316評論 25贊 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,801評論 1贊 92
  • 使用sketch最重要的一點(diǎn)是設(shè)計好控件的規(guī)范。 為做好設(shè)計規(guī)范需要對色彩進(jìn)行編號，比如:color_a”_1，c...
    youyeath閱讀 26,295評論 2贊 237
  • 我感覺最深的一條是，我們在市場上所有用的東西都是自己實(shí)戰(zhàn)中總結(jié)出來的，不是來自于課本，不是來自于其他人的說教 當(dāng)自...
    9135aa6a2ebe閱讀 195評論 0贊 0
  • 還記得在緊張的高中時候，我每天都會抽空寫寫日記。或長或短，或喜或憂，多半記錄的都是自己無稽的小心思。 源于當(dāng)時那場...
    Sinead閱讀 293評論 0贊 0