CSS元素（文本、圖片）水平垂直居中方法

wuyangnju 發布于2019-04-23 13:08 / 3245人閱讀

摘要：上下左右負偽元素父容器上設置用于設置為行內元素的水平居中居中元素自身設置用于設置為塊級元素的水平居中元素寬度固定，且不能浮動絕對定位

1、text-align:center;

2、margin:0 auto;

3、display:inline-block; + text-align:center;

4、position:relative; + float:left;

5、line-height

6、上下左右padding

7、position:absolute; + margin:auto;

8、position:absolute; + 負margin

9、position:absolute; + calc()

10、table-cell + vertical-align + inline-block + text-align

11、偽元素 + vertical-align + inline-block + text-align

12、position:absolute; + transform:translate(-50%, -50%);

13、display:flex;

14、background-position:center;

15、writing-mode

1、text-align:center;

父容器上設置text-align:center; 用于設置為行內元素的水平居中

<style>
    p{ background-color:#f00; text-align:center; }
style>

<p>居中p>

2、margin:0 auto;

元素自身設置margin:0 auto; 用于設置為塊級元素的水平居中（元素寬度固定，且不能浮動、絕對定位）

<style>
    div{ background-color:#099; }
    p{ width:100px; height:100px; margin:0 auto; background-color:#f00; }
style>

<div><p>p>div>

3、display:inline-block; + text-align:center;

用于設置為內聯塊元素的水平居中（元素不能浮動、絕對定位，注意清除inline-block引起的下邊空白）

<style>
    div{ background-color:#099; text-align:center; }
    p{ display:inline-block; margin:0; background-color:#f00; }
style>

<div><p>居中p>div>

4、position:relative; + float:left;

用于所有元素的水平居中（元素不能絕對定位，且內容若是過多，會出現橫向滾動條，可以在父容器外套一層容器設置overflow:hidden;）

<style>
    div{ position:relative; left:50%; float:left; background-color:#099; }
    p{ position:relative; left:-50%; background-color:#f00; }
style>

<div><p>居中p>div>

5、line-height

用于單行文本的垂直居中（父容器高度固定）

<style>
    p{ height:100px; background-color:#f00; line-height:100px; }
style>

<p>居中p>

6、上下左右padding

父容器上設置上下左右padding，用于設置為內聯塊、塊級元素的水平垂直居中（常用于按鈕中）

<style>
    p{ display:inline-block; margin:0; padding:10px; background-color:#f00; }
style>

<p>居中p>

7、position:absolute; + margin:auto;

用于設置為塊級元素的水平垂直居中（元素寬高固定）

<style>
    div{ position:relative; height:100px; background-color:#099; }
    p{ position:absolute; top:0; right:0; bottom:0; left:0; width:50px; height:50px; margin:auto; background-color:#f00; }
style>

<div><p>p>div>

8、position:absolute; + 負margin

用于設置為塊級元素的水平垂直居中（元素寬高固定）

<style>
    div{ position:relative; height:100px; background-color:#099; }
    p{ position:absolute; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; background-color:#f00; }
style>

<div><p>p>div>

9、position:absolute; + calc()

用于設置為塊級元素的水平垂直居中（元素寬高固定，IE8及以下不支持）

<style>
    div{ position:relative; height:100px; background-color:#099; }
    p{ position:absolute; top:calc(50% - 25px); left:calc(50% - 25px); width:50px; height:50px; margin:0; background-color:#f00; }
style>

<div><p>p>div>

10、table-cell + vertical-align + inline-block + text-align

用于設置為內聯塊元素的水平垂直居中（元素不能浮動、絕對定位，注意清除inline-block引起的下邊空白）

<style>
    div{ display:table-cell; width:100px; height:100px; background-color:#099; text-align:center; vertical-align:middle; }
    p{ display:inline-block; margin:0; background-color:#f00; vertical-align:middle; }
style>

<div><p>居中p>div>

11、偽元素 + vertical-align + inline-block + text-align

用于設置為內聯塊元素的水平垂直居中（元素不能浮動、絕對定位，注意清除inline-block引起的下邊空白）

<style>
    div{ height:100px; background-color:#099; text-align:center; }
    div:after{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle; }
    p{ display:inline-block; margin:0; background-color:#f00; vertical-align:middle; }
style>

<div><p>居中p>div>

12、position:absolute; + transform:translate(-50%, -50%);

用于設置為塊級元素的水平垂直居中（IE8及以下不支持）

<style>
    div{ position:relative; height:100px; background-color:#099; }
    p{ position:absolute; top:50%; left:50%; margin:0; background-color:#f00; transform:translate(-50%, -50%); }
style>

<div><p>居中p>div>

13、display:flex;

父容器上設置display:flex; 用于所有元素的水平垂直居中（IE10及以下不支持，本方法適用于所有元素）

<style>
    div{ display:flex; height:100px; background-color:#099; justify-content:center; align-items:center; }
    p{ margin:0; background-color:#f00; }
style>

<div><p>居中p>div>

14、background-position:center;

用于圖片居中，使用透明圖片寬高100%，背景圖片background-position居中，background-image需要動態加載最好內聯，也可以用span代替img，會少加載一張透明圖片

以上方法都可以用于圖片居中

<style>
    p{ height:100px; background-color:#f00; }
    img{ display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center; }
style>

<p><img style="background-image:url(images/1.jpg);" src="images/1.png" alt="居中">p>

15、writing-mode

用于垂直居中，根據方法1、2、3改

<style>
    div{ width:100%; height:100px; background-color:#099; text-align:center; writing-mode:vertical-lr; }
    p{ display:inline; margin:0; background-color:#f00; writing-mode:horizontal-tb; }
style>

<div><p>居中p>div>

<style>
    div{ width:100%; height:100px; background-color:#099; writing-mode:vertical-lr; }
    p{ margin:auto 0; background-color:#f00; writing-mode:horizontal-tb; }
style>

<div><p>居中p>div>

<style>
    div{ width:100%; height:100px; background-color:#099; text-align:center; writing-mode:vertical-lr; }
    p{ display:inline-block; margin:0; background-color:#f00; writing-mode:horizontal-tb; }
style>

<div><p>居中p>div>

GPU云服務器云服務器水平垂直居中 html垂直居中圖片 html圖片垂直居中垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1479.html

【第1期】聊聊css居中那點事

摘要：前言居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實現居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。前言：居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。我們主要從這幾個方面來了解下居中：水平居中垂直居中水平垂直居中水平...

劉永祥 2019-08-30 15:55 評論0 收藏0
主流的CSS水平和垂直居中技術大全

摘要：水平居中行內元素的水平居中在父元素中設置只對內聯元素或行內塊元素有效需要放置于父元素中塊級元素的水平居中只對塊級元素有效指的是自適應寬度。參考張鑫旭實現絕對定位元素的居中及原理居中方式水平居中垂直居中塊級元素設置內聯元素設置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個月也零零散散學...

KoreyLee 2019-08-29 16:26 評論0 收藏0
對css居中的一點總結

摘要：為了更好的加深對居中的理解，搜集和閱讀相關資料，發現不錯的文章將其整理出來。在學習前端的過程中，發現元素和文本的水平居中和垂直居中，是經常會出現的問題，在實際工作中也會經常碰到。居中的技巧有很多，但在編寫代碼的過程中，發現有時候技巧管用，有時候不管用，于是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現需求的水平上。為了更好的加深對居中的...

BenCHou 2019-08-29 11:17 評論0 收藏0
css的居中布局問題

摘要：在和下不支持屬性，設置方法無法解決瀏覽器兼容問題。對于不支持的和使用特定的。利用技術區別對待和，在不支持的下，通過給父子兩層元素分別設置和來實現居中。 css經常用來處理居中問題，不同的情況使用不同的方法；一 :水平居中 (1)文本、圖片等行內元素的水平居中給父元素設置text-align:center,可以實現文本、圖片等行內元素的水平居中 .wrapper{width...

leoperfect 2019-08-30 15:53 評論0 收藏0
css水平垂直居中

摘要：上面達不到需求，可以考慮使用定位，移動端能使用就使用垂直居中，單行文本，使用等于父元素高度，如果不行，就可以設置父元素，能解決一大部分問題，如果還不行就考慮定位配合，使用。1.CSS的水平居中， 1.1 父元素是塊狀元素，子元素為行內元素的居中，直接設置text-aglin: center ,常見的文本，span 標簽，button,img等行內元素都是可以使其水平居中的 .bo...

sihai 2019-04-22 16:12 評論0 收藏0

發表評論

登陸后可評論

0條評論

wuyangnju

男|高級講師

我要關注我要私信

TA的文章

linux之realpath命令

閱讀 1847·2021-11-23 09:51
如何在SpringBoot啟動時執行初始化操作，兩個簡單接口就可以實現

閱讀 1306·2021-11-18 10:02
酷銳云：雙十一活動預熱，1核/2G/10M帶寬，月付11元，4核/8G/20M帶寬，月付111元

閱讀 977·2021-10-25 09:44
IIFE立即執行函數

閱讀 2115·2019-08-26 18:36
VUE 全局變量的幾種實現方式

閱讀 1635·2019-08-26 12:17
JavaScript 進階從實現理解閉包（校對版）

閱讀 1158·2019-08-26 11:59
Vue基礎之計算屬性

閱讀 2756·2019-08-23 15:56
使用webpack打包多頁jquery項目

閱讀 3369·2019-08-23 15:05

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

CSS元素（文本、圖片）水平垂直居中方法

1、text-align:center;

2、margin:0 auto;

3、display:inline-block; + text-align:center;

4、position:relative; + float:left;

5、line-height

6、上下左右padding

7、position:absolute; + margin:auto;

8、position:absolute; + 負margin

9、position:absolute; + calc()

10、table-cell + vertical-align + inline-block + text-align

11、偽元素 + vertical-align + inline-block + text-align

12、position:absolute; + transform:translate(-50%, -50%);

13、display:flex;

14、background-position:center;

15、writing-mode

相關文章

**【第1期】聊聊css居中那點事**

**主流的CSS水平和垂直居中技術大全**

**對css居中的一點總結**

css的居中布局問題

css水平垂直居中

發表評論

0條評論

wuyangnju

男|高級講師

TA的文章

linux之realpath命令

如何在SpringBoot啟動時執行初始化操作，兩個簡單接口就可以實現

酷銳云：雙十一活動預熱，1核/2G/10M帶寬，月付11元，4核/8G/20M帶寬，月付111元

IIFE立即執行函數

VUE 全局變量的幾種實現方式

JavaScript 進階從實現理解閉包（校對版）

Vue基礎之計算屬性

使用webpack打包多頁jquery項目

最新活動