首頁 web前端 css教學 常用的CSS實作垂直居中的4種方法

常用的CSS實作垂直居中的4種方法

Mar 21, 2018 pm 01:20 PM
css 方法

這次帶給大家常用的CSS實現垂直居中的4種方法,CSS實現垂直居中的注意事項有哪些,下面就是實戰案例,一起來看一下。

行高line-height實作單行文字垂直居中

以前一直認為單行文字垂直居中要將高度和行高設定成相同的值,但高度其實沒必要設定。實際上,文字本身就在一行中居中顯示。在不設定高度的情況下,行高撐開高度。

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p>测试文字</p>
登入後複製

#vertical-align:middle實作垂直居中

#【1】設定父元素的display為table-cell

透過為table-cell元素設定vertical-align:middle,使其子元素皆實現垂直居中。這和表格裡單元格的垂直居中是類似的

[注意] 若要IE7-瀏覽器支持,則可以將其改為

表格結構

[注意]設定為table-cell的p不能使用浮動或絕對定位,因為浮動或絕對定位會使元素具有塊級元素特性,從而喪失了table-cell元素具有的垂直對齊的功能。

若需要浮動或絕對定位處理,則需要外面再套一層p。

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p>
    </p><p>我是有点长的有点长的有点长的有点长的测试文字</p>   
登入後複製

常用的CSS實作垂直居中的4種方法

【2】若子元素是圖片,透過設定父元素的行高來取代高度,設定父元素的font-size為0。

vertical-align:middle的解釋是元素的中垂點與父元素的基線加1/2 父元素中字母X的高度對齊。由於字元X在em框中並不是垂直居中的,且各個字體的字元X的高低位置不一致。

所以,當字體大小較大時,這種差異就更明顯。當 font-size為0時,相當於把字元X的字體大小設為0,於是可以實現完全的垂直居中。

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<p>
  <img  class="child lazy" src="/static/imghw/default1.png" data-src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" alt="常用的CSS實作垂直居中的4種方法" >  
</p>
登入後複製

常用的CSS實作垂直居中的4種方法

【3】透過新增元素來實現垂直居中的效果

新增元素設定高度為父級高度,寬度為0,且同樣設定垂直居中vertical- align:middle的inline-block元素。由於兩個元素之間空白被解析,所以需要在父級設定font-size:0,在子級再將font-size設為所需值;若結構要求不嚴格,則可以將兩個元素一行顯示,則不需要設定font-size:0。

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>
<p>
  </p><p>我是比较长的比较长的多行文字</p>
  <i></i> 
登入後複製

想法三:透過絕對定位實現垂直居中

#【1】若子元素不定高, 使用top50%配合translateY (-50%)可達到居中效果。
 

translate函數的百分比是相對於自身高度的,所以top:50%配合translateY(-50%)可達到居中效果。

[注意] IE9-瀏覽器不支援;

[注意]若子元素的高度已知,translate()函數也可替換為margin-top: 負的高度值。

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p>
  </p><p>测试文字</p>
登入後複製

【2】若子元素定高,結合絕對定位的盒子模型屬性,實現居中效果

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p>
  </p><p>测试文字</p>
登入後複製

在水平居中對齊中,元素外層套一層p並設定absolute,元素設定負margin-left或relative的負left屬性,可以實現水平居中的效果。但由於margin是相對於包含塊寬度的,這樣margin-top:-50%得到的是寬度而不是高度的-50%,所以不可行;對於relative的百分比取值而言,在包含塊高度為auto的情況下,chrome、safari和IE8+瀏覽器都不支援設定元素的百分比top值,所以也不可行。

思路四:使用彈性盒模型flex實作垂直居中

[注意] IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p>
    </p><p>测试文字</p>   
登入後複製

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p>
    </p><p>测试文字</p>   
登入後複製

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

css3的pointer-events使用详解

focus-within的使用详解

CSS3做出无缝轮播广告

以上是常用的CSS實作垂直居中的4種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

See all articles