使用CSS將字體居中可以使用HTML中的 center 標(biāo)簽，簡單方便。
南潯網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
具體介紹CSS中Center標(biāo)簽定義、其使用方法及相關(guān)內(nèi)容：
對瀏覽器支持：所有瀏覽器都支持 center 標(biāo)簽。
定義和用法：對其所包括的文本進(jìn)行水平居中。
標(biāo)準(zhǔn)屬性：id, class, title, style, dir, lang, xml:lang。
事件屬性：onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup。
HTML 與 XHTML 之間的差異：
A、在 HTML 4.01 中，center 元素不被贊成使用。
B、在 XHTML 1.0 Strict DTD 中，center 元素不被支持。
Center標(biāo)簽實現(xiàn)字體居中案例：
table?width="400"?border="0"
tr
tdcenter表格內(nèi)容1/center/td
td表格內(nèi)容2/td
tdcenter表格內(nèi)容3/center/td
/tr
tr
td表格內(nèi)容4/td
tdcenter表格內(nèi)容5/center/td
td表格內(nèi)容6/td
/tr
tr
tdcenter表格內(nèi)容7/center/td
td表格內(nèi)容8/td
tdcenter表格內(nèi)容9/center/td
/tr
/table
Center標(biāo)簽實現(xiàn)字體居中案例效果：
附，另一種實現(xiàn)方法：
td{ text-align:center;}
td align="center" valign="middle"
前一個是水平居中 后一個是垂直居中
對應(yīng)的css寫法:
td style="text-align:center;vertical-align:middle;"
提示和注釋：請使 CSS 樣式來居中文本！
如果您覺得我的文章有用，歡迎點贊和關(guān)注，也歡迎光臨我的個人博客
在這里總結(jié)一下CSS水平居中、垂直居中的各種方式。應(yīng)該說非常全了。
總覽一下：
用法：在父級元素的樣式中添加 text-align:center
效果圖：
用法：在元素樣式添加 margin:0 auto ，使其margin-left和margin-right平分塊級元素那一行剩余的寬度。
效果圖：
當(dāng)然如果你的塊級元素沒有設(shè)置width，那么div就會占滿一行，也就沒有水平居中的說法了。
如果由多個塊級元素，則可以使用 inline-block 配合 text-align:center ，將 inline-block 寫在需要居中的元素樣式上, text-align:center 寫在父級元素上。
效果圖：
使用flex也可以輕松做到多個塊級元素水平居中
用法：在父級元素樣式增加 display: flex justify-content: center
效果圖與第三個一樣。
當(dāng)然，多個塊級元素能用的居中方法，在單個塊級元素上也同樣可以使用。
使用 display:table 配合 margin:0 auto ，可以達(dá)到不定寬塊級元素居中效果。
效果圖：
使用絕對定位給元素一個left:50%，然后再加一個margin-lelt:-(寬度的一半)
效果圖：
不過缺點很明顯，就是你知道元素寬度而且得固定不變，所以是比較蠢的一種寫法。
效果圖：
效果圖：
這個方法和水平居中的第6個方法一樣，就不多說了。
效果圖：
這個和水平居中的第7個方法一樣，我也就不多說了。
效果圖：
效果圖：
效果圖：
缺點也比較明顯，需要計算。
效果圖：
效果圖：
效果圖：
需要在html中加入 table 標(biāo)簽，比較低效，我就不詳寫了，想了解的朋友可以Google搜索一下。
如果您覺得我的文章有用，歡迎點贊和關(guān)注，也歡迎光臨我的個人博客
1、首先先在頁面里加載一張圖片，代碼和效果如下圖所示：
2、然后設(shè)置給圖片起一個class名，方便一會兒的操作。
3、然后給圖片設(shè)置css樣式，因為方便的原因就直接在html頁面寫css樣式了。
4、經(jīng)常使用“margin: 0 auto”來實現(xiàn)水平居中，而一直認(rèn)為“margin: auto”是不能實現(xiàn)垂直居中，但是實際上，僅需要添加一些限制便能實現(xiàn)效果，就是通過定位：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
設(shè)置定位讓上下左右都為0，然后通過margin：0 auto，來讓元素實現(xiàn)上下左右都居中。
5、設(shè)置完CSS樣式之后，通過瀏覽查看代碼的效果就可以，可以看到圖片已經(jīng)實現(xiàn)了。
6、最后給大家附上全部的代碼：
!DOCTYPE html
html
head
meta charset="utf-8" /
title使用CSS讓圖片水平垂直居中/title
/head
body
img class="pic" src="img/timg.jpg" alt="" /
/body
style type="text/css"
.pic{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/style
/html
text-align: center;水平居中
height:30px;line-height:30px;垂直居中
vertical-align:middle;垂直居中
td里面可以直接td valign="middle" align="center"
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
其實當(dāng)時在互聯(lián)網(wǎng)界已經(jīng)有過一些統(tǒng)一樣式表語言的建議了，但CSS是第一個含有“層疊”豐意的樣式表語言。在CSS中，一個文件的樣式可以從其他的樣式表中繼承。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計，混合每個人的愛好。
哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網(wǎng)絡(luò)會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。
需要準(zhǔn)備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html。
2、在index.html中的style標(biāo)簽中，輸入css代碼：p {text-align: center}。
3、瀏覽器運行index.html頁面，此時p標(biāo)簽內(nèi)的文字成功被水平居中顯示。
水平居中
若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實現(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 布局, 可以輕松的實現(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;}
重慶分公司
重慶分公司
