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

wuyangnju 發(fā)布于2019-04-23 13:08 / 3243人閱讀

摘要：上下左右負(fù)偽元素父容器上設(shè)置用于設(shè)置為行內(nèi)元素的水平居中居中元素自身設(shè)置用于設(shè)置為塊級(jí)元素的水平居中元素寬度固定，且不能浮動(dòng)絕對(duì)定位

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; + 負(fù)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;

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

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

<p>居中p>

2、margin:0 auto;

元素自身設(shè)置margin:0 auto; 用于設(shè)置為塊級(jí)元素的水平居中（元素寬度固定，且不能浮動(dòng)、絕對(duì)定位）

<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;

用于設(shè)置為內(nèi)聯(lián)塊元素的水平居中（元素不能浮動(dòng)、絕對(duì)定位，注意清除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;

用于所有元素的水平居中（元素不能絕對(duì)定位，且內(nèi)容若是過多，會(huì)出現(xiàn)橫向滾動(dòng)條，可以在父容器外套一層容器設(shè)置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

父容器上設(shè)置上下左右padding，用于設(shè)置為內(nèi)聯(lián)塊、塊級(jí)元素的水平垂直居中（常用于按鈕中）

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

<p>居中p>

7、position:absolute; + margin:auto;

用于設(shè)置為塊級(jí)元素的水平垂直居中（元素寬高固定）

<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; + 負(fù)margin

用于設(shè)置為塊級(jí)元素的水平垂直居中（元素寬高固定）

<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()

用于設(shè)置為塊級(jí)元素的水平垂直居中（元素寬高固定，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

用于設(shè)置為內(nèi)聯(lián)塊元素的水平垂直居中（元素不能浮動(dòng)、絕對(duì)定位，注意清除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

用于設(shè)置為內(nèi)聯(lián)塊元素的水平垂直居中（元素不能浮動(dòng)、絕對(duì)定位，注意清除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%);

用于設(shè)置為塊級(jí)元素的水平垂直居中（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;

父容器上設(shè)置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需要?jiǎng)討B(tài)加載最好內(nèi)聯(lián)，也可以用span代替img，會(huì)少加載一張透明圖片

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

<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

用于垂直居中，根據(jù)方法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>

云服務(wù)器 GPU云服務(wù)器水平垂直居中 html垂直居中圖片 html圖片垂直居中垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1479.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wuyangnju

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

linux之realpath命令

閱讀 1845·2021-11-23 09:51
如何在SpringBoot啟動(dòng)時(shí)執(zhí)行初始化操作，兩個(gè)簡(jiǎn)單接口就可以實(shí)現(xiàn)

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

閱讀 974·2021-10-25 09:44
IIFE立即執(zhí)行函數(shù)

閱讀 2114·2019-08-26 18:36
VUE 全局變量的幾種實(shí)現(xiàn)方式

閱讀 1634·2019-08-26 12:17
JavaScript 進(jìn)階從實(shí)現(xiàn)理解閉包（校對(duì)版）

閱讀 1158·2019-08-26 11:59
Vue基礎(chǔ)之計(jì)算屬性

閱讀 2755·2019-08-23 15:56
使用webpack打包多頁jquery項(xiàng)目

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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; + 負(fù)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

相關(guān)文章

**【第1期】聊聊css居中那點(diǎn)事**

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

**對(duì)css居中的一點(diǎn)總結(jié)**

css的居中布局問題

css水平垂直居中

發(fā)表評(píng)論

0條評(píng)論

wuyangnju

男|高級(jí)講師

TA的文章

linux之realpath命令

如何在SpringBoot啟動(dòng)時(shí)執(zhí)行初始化操作，兩個(gè)簡(jiǎn)單接口就可以實(shí)現(xiàn)

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

IIFE立即執(zhí)行函數(shù)

VUE 全局變量的幾種實(shí)現(xiàn)方式

JavaScript 進(jìn)階從實(shí)現(xiàn)理解閉包（校對(duì)版）

Vue基礎(chǔ)之計(jì)算屬性

使用webpack打包多頁jquery項(xiàng)目

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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; + 負(fù)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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

2、margin:0 auto;

4、position:relative; + float:left;

6、上下左右padding

7、position:absolute; + margin:auto;

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