如果您覺得我的文章有用，歡迎點(diǎn)贊和關(guān)注，也歡迎光臨我的個(gè)人博客
創(chuàng)新互聯(lián)是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站備案、服務(wù)器租用、域名注冊(cè)、軟件開發(fā)、微信小程序定制開發(fā)等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個(gè)面向全國(guó)乃至全球的業(yè)務(wù)窗口：建站歡迎來電：13518219792
在這里總結(jié)一下CSS水平居中、垂直居中的各種方式。應(yīng)該說非常全了。
總覽一下：
用法：在父級(jí)元素的樣式中添加 text-align:center
效果圖：
用法：在元素樣式添加 margin:0 auto ，使其margin-left和margin-right平分塊級(jí)元素那一行剩余的寬度。
效果圖：
當(dāng)然如果你的塊級(jí)元素沒有設(shè)置width，那么div就會(huì)占滿一行，也就沒有水平居中的說法了。
如果由多個(gè)塊級(jí)元素，則可以使用 inline-block 配合 text-align:center ，將 inline-block 寫在需要居中的元素樣式上, text-align:center 寫在父級(jí)元素上。
效果圖：
使用flex也可以輕松做到多個(gè)塊級(jí)元素水平居中
用法：在父級(jí)元素樣式增加 display: flex justify-content: center
效果圖與第三個(gè)一樣。
當(dāng)然，多個(gè)塊級(jí)元素能用的居中方法，在單個(gè)塊級(jí)元素上也同樣可以使用。
使用 display:table 配合 margin:0 auto ，可以達(dá)到不定寬塊級(jí)元素居中效果。
效果圖：
使用絕對(duì)定位給元素一個(gè)left:50%，然后再加一個(gè)margin-lelt:-(寬度的一半)
效果圖：
不過缺點(diǎn)很明顯，就是你知道元素寬度而且得固定不變，所以是比較蠢的一種寫法。
效果圖：
效果圖：
這個(gè)方法和水平居中的第6個(gè)方法一樣，就不多說了。
效果圖：
這個(gè)和水平居中的第7個(gè)方法一樣，我也就不多說了。
效果圖：
效果圖：
效果圖：
缺點(diǎn)也比較明顯，需要計(jì)算。
效果圖：
效果圖：
效果圖：
需要在html中加入 table 標(biāo)簽，比較低效，我就不詳寫了，想了解的朋友可以Google搜索一下。
如果您覺得我的文章有用，歡迎點(diǎn)贊和關(guān)注，也歡迎光臨我的個(gè)人博客
采用css的flex布局實(shí)現(xiàn)最為簡(jiǎn)單有效。display:?flex
div?class="box"
div?class="item"我要居中/div
/div
.box?{
display:?flex;
width:?200px;
height:?200px;
justify-content:?center;?//?水平居中
align-items:?center;?//?垂直居中
}
CSS是層疊樣式表。下面，我們來看看怎么使用CSS讓圖片水平垂直都居中吧。
新建一張文檔
在桌面新建一張文本文檔，改名為1.txt，如下圖所示：
基礎(chǔ)代碼
然后打開文本文檔，編寫基礎(chǔ)代碼，再把桌面上的老虎圖片引入進(jìn)去，如下圖所示：
后綴名
然后把文本文檔后綴名改為.html，如下圖所示：
運(yùn)行網(wǎng)頁(yè)
然后在瀏覽器中運(yùn)行網(wǎng)頁(yè)，現(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
HTML：
CSS：
重點(diǎn)：父容器高度和子元素line-height一樣的數(shù)值，內(nèi)容中的行內(nèi)元素就會(huì)垂直居中。
HTML：
CSS：
重點(diǎn)：給父元素添加一個(gè)偽元素::before，讓這個(gè)偽元素的div高度為100%，這樣其他div就可垂直居中了，但div 本身就是塊級(jí)元素，而vertical-align是行內(nèi)元素屬性，則需要修改為inline-block。
HTML：
CSS：
重點(diǎn)：在父元素中設(shè)置相對(duì)定位position: relative，子元素設(shè)置絕對(duì)定位 position: absolute；top和left相對(duì)父元素的50%，與其搭配的 transformse: translate(-50% , -50%)表示X軸和Y軸方向水平居中。
HTML：
CSS：
重點(diǎn)：子元素絕對(duì)定位position:absolute,父元素相對(duì)定位position: relative，將上下左右的數(shù)值都設(shè)置為0，同時(shí)margin:auto。絕對(duì)定位是會(huì)脫離文檔流的，這點(diǎn)要注意一下。
HTML：
CSS：
重點(diǎn)：給父元素設(shè)置display: flex布局，水平居中 justify-content: center，垂直居中align-items: center。
HTML：
CSS：
重點(diǎn)：父元素position定位為relative，子元素position定位為absolute。水平居中同理。calc居中要減多少要結(jié)合到自己的寬高設(shè)置多少再進(jìn)行計(jì)算。
HTML：
CSS：
重點(diǎn)：將父元素設(shè)置display:table，子元素table-cell會(huì)自動(dòng)撐滿父元素。組合 display: table-cell、vertical-align: middle、text-align: center完成水平垂直居中。
01
先寫上html代碼，如圖，內(nèi)容很簡(jiǎn)單，就是一個(gè)div里有一段文本。
02
再寫上div對(duì)應(yīng)的樣式，如圖，這里只設(shè)置了div的邊框和高度，寬度。
03
如果這里顯示的話，我們看下頁(yè)面，文本是不會(huì)水平居中和垂直居中的。
04
要讓文本水平居中，我們可以添加樣式：text-align: center;
要讓文本垂直居中，我們可以添加樣式： vertical-align: middle;和display: table-cell;
05
添加完這幾個(gè)樣式后，刷新頁(yè)面可以看到現(xiàn)在的文本已經(jīng)可水平居中和垂直居中了。
1. 設(shè)置 margin: 0 auto;
單行文本垂直居中，通過設(shè)置行高為父元素高度（父元素高度已知）。
圖片垂直居中，設(shè)置上下padding（父元素高估不設(shè)置）。
圖片垂直居中，下邊這種方法會(huì)有一定偏差（父元素高估不設(shè)置）。
圖片垂直居中，圖片作為背景。
1. 若元素是行內(nèi)塊級(jí)元素, 基本思想是使用display: inline-block, vertical-align: middle和一個(gè)偽元素讓內(nèi)容塊處于容器中央。
行內(nèi)元素可可以轉(zhuǎn)換為inline-block實(shí)現(xiàn)居中。
重慶分公司
重慶分公司
