容器的居中顯示在網(wǎng)頁設(shè)計中是很常見的，居中顯示可以獲得視覺的焦點(diǎn)，是內(nèi)容更加突出，下面就簡單的說明一下如何在HTML中通過樣式的控制來實(shí)現(xiàn)
公司主營業(yè)務(wù)：網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出南華免費(fèi)做網(wǎng)站回饋大家。
01
最常見的一種，代碼示例如下圖，首先，取big一半像素大小賦給small層，通過margin: 0 auto; text-align: center來實(shí)現(xiàn)
02
第二種方法，代碼示例如下圖，將big層的display設(shè)置為table-cell,然后small層的margin-left?。?00-250）/2，也就是125即可
03
第三種方法，代碼示例如下圖，將big層的position設(shè)置為absolute，然后small層的margin-left?。?00-250）/2，也就是125即可
04
第四種方法，通過display:flex實(shí)現(xiàn)，代碼示例如下圖，big層display:flex;flex-direction:column;而small層align-self:center
05
第五種方法，在small層的寬度沒有的時候，可以通過width:fit-content這個設(shè)置來完成，代碼示例如下
06
第六種方法，通過display:inline-block來實(shí)現(xiàn)，將這個設(shè)置賦給big層即可，代碼示例如下圖
07
第七種方法，設(shè)置big層position:relative，相對情況下，使small層左浮動，代碼示例如下
08
第八種方法，transform屬性，代碼示例如下
09
第九種方法，借助第三方樣式，比如增加一個add節(jié)點(diǎn)，水平浮動向左，使small層隨之浮動，代碼示例如下
特別提示
每種方法都適應(yīng)不同的運(yùn)行環(huán)境，實(shí)際操作時需要考慮不同瀏覽器的解析時的兼容性
做法如下： 1.為表格(table標(biāo)簽)設(shè)置一個具體的寬度
2.添加一個屬性 margin: 0 auto;
具體代碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta http-equiv="x-ua-compatible" content="IE=edge"/
titleHello, HTML5/title
style
/* 在此處填寫疊層樣式 */
body, html{
height: 100%;
width: 100%;
margin: 0; padding: 0;
}
table {
height: 80%;
width: 80%; /* 必須設(shè)置一個寬度， margin: 0 auto才能使之居于父組件中央*/
margin: 10px auto; /* 通過設(shè)置外邊距（margin）中的左右外邊距屬性為auto使之居于父組件（body）中間*/
}
table tr{
height: 40px;
width: 100%;
background-color: red;
}
tabletrtd{
height: 100%; width: 33.3%;
background-color: red;
}
/style
script
/* 在此處填寫JavaScript代碼 */
/script
/head
body
table
tr
[img]css讓div里的表格居中對齊的方法有很多，可以改變改變表格的樣式屬性，也可以通過改變div的樣式屬性，這里介紹通過改變表格的樣式屬性使表格居中，這樣不會改變div里除表格的其他元素的樣式屬性和位置。以下演示具體步驟：
1、打開HTML文件編輯器，新建一個HTML文件并添加HTML的基本元素標(biāo)簽。
2、添加好基本元素標(biāo)簽后在body里添加div元素，然后在div元素里面添加一個表格元素。
3、接下來配置div元素樣式和表格元素樣式，使得效果可以明顯體現(xiàn)出來，這里使用的是行內(nèi)式，也可以使用行外式和外部式。其中核心代碼都是：margin：auto。
4、保存好后運(yùn)行這個HTML文件。效果如圖：
水平居中
若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.
若是塊級元素, 該元素設(shè)置 margin:0 auto即可.
若子元素包含 float:left 屬性, 為了讓子元素水平居中, 則可讓父元素寬度設(shè)置為fit-content,并且配合margin, 作如下設(shè)置:
.parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;}
使用flex 布局, 可以輕松的實(shí)現(xiàn)水平居中, 子元素設(shè)置如下:
.son{
display: flex;
justify-content: center;}
使用CSS3中新增的transform屬性, 子元素設(shè)置如下:
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);}
使用絕對定位方式, 以及負(fù)值的margin-left, 子元素設(shè)置如下:
.son{
position:absolute;
width:固定;
left:50%;
margin-left:-0.5寬度;}
使用絕對定位方式, 以及l(fā)eft:0;right:0;margin:0 auto; 子元素設(shè)置如下:
.son{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;}
垂直居中
若元素是單行文本, 則可設(shè)置 line-height 等于父元素高度
若元素是行內(nèi)塊級元素, 基本思想是使用display: inline-block, vertical-align: middle和一個偽元素讓內(nèi)容塊處于容器中央.
.parent::after, .son{
display:inline-block;
vertical-align:middle;}.parent::after{
content:'';
height:100%;}
元素高度不定
可用 vertical-align 屬性, 而vertical-align只有在父層為 td 或者 th 時, 才會生效, 對于其他塊級元素, 例如 div、p 等, 默認(rèn)情況是不支持的. 為了使用vertical-align, 我們需要設(shè)置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
用 Flex 布局
.parent {
display: flex;
align-items: center;}
可用 transform , 設(shè)置父元素相對定位(position:relative), 子元素如下css樣式:
.son{
position:absolute;
top:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);}
元素高度固定
設(shè)置父元素相對定位(position:relative), 子元素如下css樣式:
.son{
position:absolute;
top:50%;
height:固定;
margin-top:-0.5高度;}
設(shè)置父元素相對定位(position:relative), 子元素如下css樣式:
.son{
position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;}
做法如下：????1.為表格(table標(biāo)簽)設(shè)置一個具體的寬度
2.添加一個屬性 margin: 0 auto;
具體代碼如下：
!DOCTYPE?html
html?lang="en"
head
meta?charset="UTF-8"
meta?http-equiv="x-ua-compatible"?content="IE=edge"/
titleHello,?HTML5/title
style
/*??在此處填寫疊層樣式??*/
body,?html{
height:?100%;
width:?100%;
margin:?0;?padding:?0;
}
table?{
height:?80%;
width:?80%;?????????/*??必須設(shè)置一個寬度，?margin:?0?auto才能使之居于父組件中央*/
margin:?10px?auto;??/*??通過設(shè)置外邊距（margin）中的左右外邊距屬性為auto使之居于父組件（body）中間*/
}
table?tr{
height:?40px;
width:?100%;
background-color:?red;
}
tabletrtd{
height:?100%;?width:?33.3%;
background-color:?red;
}
/style
script
/*??在此處填寫JavaScript代碼???*/
/script
/head
body
table
tr
td12/td
td12/td
td12/td
/tr
tr
td/td
td/td
td/td
/tr
tr
td/td
td/td
td/td
/tr
/table
!--?在此處編寫HTML頁面??--
/body
/html
1、普通居中。
align="center"
table?align="center"
tr
td商品名稱/td
td商品價格/td
td商品描述/td
td購買/td
/tr
/table
2、css樣式居中。
margin:0 auto
style?type="text/css"
table1{
margin:0?auto;/*?自動居中，不論王爺?shù)拇笮?*/
border:1;/*?邊框粗度?*/
width:80%;/*?寬度只占當(dāng)前頁面的80%?*/
}
/style
重慶分公司
重慶分公司
