整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
● ●
在網(wǎng)頁(yè)上使 HTML 元素居中看似一件很簡(jiǎn)單的事情. 至少在某些情況下是這樣的，但是復(fù)雜的布局往往使一些解決方案不能很好的發(fā)揮作用。
在網(wǎng)頁(yè)布局中元素水平居中比元素垂直居中要簡(jiǎn)單不少，同時(shí)實(shí)現(xiàn)水平居中和垂直居中往往是最難的。現(xiàn)在是響應(yīng)式設(shè)計(jì)的時(shí)代，我們很難確切的知道元素的準(zhǔn)確高度和寬度，所以一些方案不大適用。據(jù)我所知, 在CSS中至少有六種實(shí)現(xiàn)居中的方法。我將使用下面的HTML結(jié)構(gòu)從簡(jiǎn)單到復(fù)雜開(kāi)始講解:
<div class="center"> <img src="jimmy-choo-shoe.jpg" alt></div>鞋子圖片會(huì)改變，但是他們都會(huì)保持500pxX500px的大小。 HSL colors 用于使背景顏色保持一致。
有時(shí)顯而易見(jiàn)的方案是最佳的選擇：
div.center { text-align: center; background: hsl(0, 100%, 97%);
}
div.center img { width: 33%; height: auto;}這種方案沒(méi)有使圖片垂直居中：你需要給<div>添加padding或者給內(nèi)容添加margin-top和margin-bottom使容器與內(nèi)容之間有一定的距離。
這種方式實(shí)現(xiàn)水平居中和上面使用text-align的方法有相同局限性。
div.center { background: hsl(60, 100%, 97%);}
div.center img { display: block; width: 33%; height: auto; margin: 0 auto;}注意： 必須使用display: block使margin: 0 auto對(duì)img元素生效。
使用 display: table-cell, 而不是使用table標(biāo)簽; 可以實(shí)現(xiàn)水平居中和垂直居中，但是這種方法需要添加額外的元素作為外部容器。
<div class="center-aligned"> <div class="center-core"> <img src="jimmy-choo-shoe.jpg"> </div></div>CSS:
.center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%;}.center-core { display: table-cell; text-align: center; vertical-align: middle;}
.center-core img { width: 33%; height: auto;}注意：為了使div不折疊必須加上width: 100%，外部容器元素也需要加上一定高度使得內(nèi)容垂直居中。給html和body設(shè)置高度后，也可以使元素在body垂直居中。此方法在IE8+瀏覽器上生效。
這種 方案 有非常好的跨瀏覽器支持。有一個(gè)缺點(diǎn)就是必須顯式聲明外部容器元素的height：
.absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%);}.absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}Stephen在他的 博客 中演示了這種方案的幾種變化。
Chris Coiyer 提出了一個(gè)使用 CSS transforms 的新方案。 同樣支持水平居中和垂直居中:
.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px;}.center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto;}但是有以下幾種缺點(diǎn):
CSS transform 在部分就瀏覽器上需要使用 前綴。
不支持 IE9 以下的瀏覽器。
外部容器需要設(shè)置height（或者用其他方式設(shè)置），因?yàn)椴荒塬@取 絕對(duì)定位 的內(nèi)容的高度。
如果內(nèi)容包含文字，現(xiàn)在的瀏覽器合成技術(shù)會(huì)使文字模糊不清。
當(dāng)新舊語(yǔ)法差異和瀏覽器前綴消失時(shí)，這種方法會(huì)成為主流的居中方案。
.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center;}.center img { width: 30%; height: auto;}在很多方面 flexbox 是一種簡(jiǎn)單的方案， 但是它有新舊兩種語(yǔ)法以及早期版本的IE缺乏支持 （盡管可以使用 display: table-cell作為降級(jí)方案）。
現(xiàn)在規(guī)范已經(jīng)最終確定，現(xiàn)代瀏覽器也大都支持,我寫(xiě)了一篇詳細(xì)的教程 教程。
在某些情況下比f(wàn)lexbox更全面：
.center { background: hsl(300, 100%, 97%); min-height: 600px; position: relative;}.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}很簡(jiǎn)單，calc允許你基于當(dāng)前的頁(yè)面布局計(jì)算尺寸。在上面的簡(jiǎn)單計(jì)算中， 50% 是容器元素的中心點(diǎn)，但是如果只設(shè)置50%會(huì)使圖片的左上角對(duì)齊div的中心位置。 我們需要把圖片向左和向上各移動(dòng)圖片寬高的一半。計(jì)算公式為：
top: calc(50% - (40% / 2));left: calc(50% - (40% / 2));在現(xiàn)在的瀏覽其中你會(huì)發(fā)現(xiàn)，這種方法更適用于當(dāng)內(nèi)容的寬高為固定尺寸：
.center img { width: 500px; height: 500px; position: absolute; top: calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }我在 這篇文章 中詳細(xì)講解了calc。
這種方案和flex一樣有許多相同的缺點(diǎn)： 雖然在現(xiàn)代瀏覽器中有良好的支持，但是在較早的版本中仍然需要瀏覽器前綴，并且不支持IE8。
.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}當(dāng)然還有 其他更多的方案。理解這六種方案之后，web開(kāi)發(fā)人員在面對(duì)元素居中的時(shí)候會(huì)有更多的選擇。
關(guān)注“網(wǎng)頁(yè)設(shè)計(jì)自學(xué)平臺(tái)”訂閱號(hào)回復(fù)以下｜關(guān)鍵字｜
｜dw教程｜js教程｜淘寶案例｜軟件下載｜搜狐案例｜網(wǎng)站模板
｜ps教程｜ai教程 ｜ui教程｜騰訊案例｜ ae教程 ｜字體下載｜
｜上課素材｜前端特效｜華潤(rùn)萬(wàn)家案例｜最新dw案例｜
戳“閱讀原文”入群獲取最新高清前端視頻！
者：薔薇Nina
原文：https://www.cnblogs.com/wcwnina/p/11297630.html
在CSS里，標(biāo)簽位置居中一直是困擾Web前端的難題。在本文中，我對(duì)這類問(wèn)題進(jìn)行了探究和給出了幾點(diǎn)建議，供讀者參考。
在父級(jí)標(biāo)簽中使用 text-align: center。
效果：
如果是單行，則為該標(biāo)簽設(shè)置行高（line-height）且與其父級(jí)標(biāo)簽 height 相等即可。
效果：
如果是多行，稍微有點(diǎn)麻煩，需要在該標(biāo)簽設(shè)置 display: table-cell 和 vertical-align: middle，在其父級(jí)標(biāo)簽設(shè)置 display: table。
效果：
方法一：在父級(jí)標(biāo)簽中使用 flex 彈性盒子。
效果：
方法二：在該標(biāo)簽中使用 margin 屬性。
效果：
在父級(jí)標(biāo)簽中使用 flex 彈性盒子。
效果：
總結(jié)：對(duì)于行內(nèi)標(biāo)簽居中，優(yōu)先考慮文本對(duì)齊（text-align）和顯示單元格（table-cell）；對(duì)于塊標(biāo)簽居中，優(yōu)先考慮顯示彈性盒子（flex）。
如果網(wǎng)頁(yè)只有一種顏色，那是非常可怕的，顏色的設(shè)置豐富了網(wǎng)頁(yè)，就如同多彩繽紛的世界。
在了解css顏色之前，我們回顧下計(jì)算機(jī)是如何顯示顏色的？計(jì)算機(jī)根據(jù)色光三原色的原理通過(guò)各種算法來(lái)顯示顏色。
網(wǎng)頁(yè)中使用顏色關(guān)鍵字、16進(jìn)制字符、rgb、rgba等表示紅，綠，藍(lán)三種顏色混合色，如下示例,幾種寫(xiě)法都是指同一個(gè)顏色（紅色）：
color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)對(duì)于16進(jìn)制形式，每2位表示一個(gè)顏色，從左到右分別是紅、綠、藍(lán)，每種顏色取值從00 到 FF。
如下示例：
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍(lán)色*/對(duì)于rgb的表示法，由三個(gè)參數(shù)組成，分別是紅、綠、藍(lán)，每種顏色取值從0 到 255。
如下示例：
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍(lán)色*/紅，綠，藍(lán)值從0到255的結(jié)合，給出了總額超過(guò)1600多萬(wàn)不同的顏色（256 × 256 ×256）。
但是現(xiàn)代大多數(shù)顯示器能夠顯示至少16384種顏色。所以在使用顏色時(shí)要格外注意，避免設(shè)置不能夠顯示的顏色，可以參考網(wǎng)頁(yè)安全色：https://www.w3school.com.cn/cssref/css_colors.asp。
顏色除了有三原色紅綠藍(lán)組成，還有亮度層級(jí)，如下圖：
rgba 中的a是指透明度，這個(gè)是css3新增加的屬性，通過(guò)rgba可以設(shè)置更加漂亮的顏色。
通過(guò)background屬性可以設(shè)置元素的背景色、背景圖片，語(yǔ)法如下：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;background 在一個(gè)聲明中設(shè)置所有的背景屬性，可以在這里設(shè)置如下屬性：
各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個(gè)值。
建議使用background 簡(jiǎn)寫(xiě)屬性，這樣可以更好地兼容較老的瀏覽器，少寫(xiě)很多代碼，當(dāng)然你也可以分開(kāi)使用，比如：
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;1、背景顏色 —— background-color
background-color 和之前講的的color 一樣，可以使用16進(jìn)制、rgb、rgba等設(shè)置顏色。如下實(shí)例：
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>如下圖顯示：
注意：background-color: transparent; 指透明色，不顯示任何顏色。
2、背景圖片的使用——background-image
給html元素添加背景圖片，在早期網(wǎng)頁(yè)制作中被廣泛應(yīng)用，如今已不建議大量使用。如下實(shí)例：
body {background-image:url(/static/bg.gif);}這里使用了一個(gè)125*125大小的圖片，如下：
但是你會(huì)發(fā)現(xiàn)，整個(gè)網(wǎng)頁(yè)鋪滿了圖片，上面的代碼默認(rèn)會(huì)鋪滿整個(gè)頁(yè)面從左到右，從上到下 。如果不想被平鋪，可以使用background-repeat 設(shè)置。
背景圖片同時(shí)可以設(shè)置多個(gè)背景圖片，如下：
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);多個(gè)圖像以逗號(hào)隔開(kāi)，在頁(yè)面中多個(gè)圖片會(huì)疊加顯示，第一張圖片顯示在最頂端。
如下效果：
3、背景重復(fù)方式 —— background-repeat
它有如下幾個(gè)屬性：
repeat | 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。 |
repeat-x | 背景圖像將在水平方向重復(fù)。 |
repeat-y | 背景圖像將在垂直方向重復(fù)。 |
no-repeat | 背景圖像不重復(fù)。 |
inherit | 從父元素繼承 background-repeat 屬性的設(shè)置。 |
實(shí)例如下：
4、背景圖的位置 —— background-position
背景圖片默認(rèn)顯示在左上角，語(yǔ)法如下：
background-position: x y; // x 距離左邊距離，y距離頂部距離如果要改變它的位置，可以使用關(guān)鍵字：top、bottom、left、right 和 center；或者使用長(zhǎng)度值，如 100px 或 5cm；也可以使用百分?jǐn)?shù)值。
x 可以取值 百分比| 數(shù)值| left | center | right。
y 可以取值 百分比| 數(shù)值| top| center | bottom。
當(dāng)只設(shè)置一個(gè)值的時(shí)候，另一個(gè)會(huì)缺省為 center。
使用關(guān)鍵字，將背景圖片水平居中，垂直居中：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 使用百分比%：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 50% 50% 等同于 center center，顯示效果和上圖一樣。
還可以使用具體數(shù)值，比如 px、em、cm等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 顯示效果如下：
5、背景圖相對(duì)于容器的基準(zhǔn)點(diǎn) —— background-origin
就是設(shè)置背景圖片相對(duì)于html元素什么位置作為初始坐標(biāo)點(diǎn)，語(yǔ)法：
background-origin: padding-box|border-box|content-box;幾種值得含義：
padding-box | 背景圖像相對(duì)填充框的位置 |
border-box | 背景圖像相對(duì)邊界框的位置 |
content-box | 背景圖像相對(duì)內(nèi)容框的位置 |
如下實(shí)例：
6、背景圖片大小 —— background-size
默認(rèn)會(huì)顯示背景圖原始尺寸，可以通過(guò)此屬性設(shè)置背景圖片在元素上的大小，語(yǔ)法：
background-size: width height;寬度和高度可以使用 數(shù)值、百分比%、cover 及 contain ;
數(shù)值：可以使用任何單位的數(shù)字，比如 px、em、cm等。如果設(shè)置一個(gè)值，第二個(gè)為"auto(自動(dòng))"。
百分比%：相對(duì)于其所在html原始寬度和高度，如果設(shè)置一個(gè)值，第二個(gè)為"auto(自動(dòng))"。
cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。
contain：把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
如下示例：
7、背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
background-attachment 屬性有以下幾個(gè)值：
scroll | 背景圖片隨頁(yè)面的其余部分滾動(dòng)。這是默認(rèn) |
fixed | 背景圖像是固定的 |
inherit | 指定background-attachment的設(shè)置應(yīng)該從父元素繼承 |
local | 背景圖片隨滾動(dòng)元素滾動(dòng) |
如設(shè)置一個(gè)固定的背景圖片，不跟隨頁(yè)面滾動(dòng)：
background-attachment:fixed;滾動(dòng)滾動(dòng)條，會(huì)發(fā)下背景圖片始終固定在屏幕那個(gè)位置。
8、背景繪制區(qū)域 —— background-clip
語(yǔ)法如下：
background-clip: border-box|padding-box|content-box;border-box | 默認(rèn)值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）。 |
padding-box | 背景繪制在襯距方框內(nèi)（剪切成襯距方框）。 |
content-box | 背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。 |
這個(gè)屬性類似于 background-origin ，只不過(guò)它會(huì)裁剪背景圖片，如下示例：
9、背景層的混合模式 —— background-blend-mode
所謂混合模式就是將圖片與顏色或圖片與圖片進(jìn)行混合，語(yǔ)法：
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;屬性值：
示例如下：
正常模式
luminosity 亮度模式
color 顏色模式
其它模式可以自己試試，看下有什么區(qū)別。
到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡(jiǎn)寫(xiě)也可以分開(kāi)寫(xiě)，要想完全掌握，還得多練習(xí)，每種屬性進(jìn)行組合使用看看其效果。
一般建議使用 background 簡(jiǎn)寫(xiě)方式，主要是可以少寫(xiě)很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯(cuò)誤，并補(bǔ)充。
上篇：前端入門(mén)——css鏈接樣式
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
