怎么使用CSS讓圖片水平垂直都居中？

CSS是層疊樣式表。下面，我們來看看怎么使用CSS讓圖片水平垂直都居中吧。

創(chuàng)新互聯(lián)專注于大觀企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站定制開發(fā)。大觀網(wǎng)站建設(shè)公司,為大觀等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

新建一張文檔

在桌面新建一張文本文檔，改名為1.txt，如下圖所示：

基礎(chǔ)代碼

然后打開文本文檔，編寫基礎(chǔ)代碼，再把桌面上的老虎圖片引入進(jìn)去，如下圖所示：

后綴名

然后把文本文檔后綴名改為.html，如下圖所示：

運(yùn)行網(wǎng)頁

然后在瀏覽器中運(yùn)行網(wǎng)頁，現(xiàn)在圖片有了，只是還沒有居中，圖片居住代碼要用CSS寫，如下圖所示：

CSS代碼

然后寫上CSS代碼，如下圖所示：

垂直水平居中

可以看到圖片已經(jīng)垂直和水平居中，如下圖所示：

總代碼

!DOCTYPE html

head

titlehtml/title

style type="text/css"

.picTiger{

margin: auto;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

/style

/head

body

img class="picTiger" src="C:/Users/Administrator/Desktop/1.jpg"

/body

html

CSS中讓元素垂直水平居中的幾種方法

CSS中，如果我們想讓元素水平垂直居中，有很多種方法可以達(dá)成我們想要的效果。

接下來就來看看有哪些方法。

CSS文字垂直居中

01

先寫上html代碼，如圖，內(nèi)容很簡(jiǎn)單，就是一個(gè)div里有一段文本。

02

再寫上div對(duì)應(yīng)的樣式，如圖，這里只設(shè)置了div的邊框和高度，寬度。

03

如果這里顯示的話，我們看下頁面，文本是不會(huì)水平居中和垂直居中的。

04

要讓文本水平居中，我們可以添加樣式：text-align: center;

要讓文本垂直居中，我們可以添加樣式： vertical-align: middle;和display: table-cell;

05

添加完這幾個(gè)樣式后，刷新頁面可以看到現(xiàn)在的文本已經(jīng)可水平居中和垂直居中了。