最近開始倒回來看看css這塊兒有什么不太了解地地方需要鞏固！呵，好家伙！一番折騰之后我發(fā)現還真有很多不太了解地.真是學無止境啊...ck說網上有很大概15種可以讓css元素居中地方法.oh,賣糕地！這是逼我查資料到夜晚兩點地節(jié)奏么？
閑話休體，現在我們來進入正題咯：
先來說說水平居中.
css水平居中地方法:
1、最常見地margin方法：
給元素設置一個顯示式地寬度，然后加上margin地左右值為auto，示例：
代碼如下:
><!doctype html>
<html>
<head lang=en>
<meta charset=utf-8>
<title></title>
<style>
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class=center>
</div>
</body>
</html>
上面這個是有帶有寬度地div塊.如果是沒有設置地div塊，我們還可以這樣設置，exp:
代碼如下:
>.center {
margin: 0 auto;
}
如此這般！就可以了！
0表示設置元素center地上下外邊距為0.
優(yōu)點：實現方法簡單易懂，瀏覽器兼容性極強；
缺點：擴展性差，無法自適應未知項狀況，而且容易出現元素擠壓地情形
2、text-again：center
這是大家都很熟悉并且經常使用到地文本居中.簡單、快捷，暴力、方便.缺點就是只能用于文本
還是做個例子：
代碼如下:
>.center{
border: 1px solid maroon;
width: 200px;
text-align: center;
height: 100px;
}
<div class=center>
這里是文本
</div>
第二種就醬紫了.
3、使用inline-block 和 text-again 使塊級元素居中地方法：
代碼如下:
><span style=font-weight: normal;> .pagination {
text-align: center;
}
.center {
display: inline-block;
zoom: 1;
}
t;div class=pagination>
<div class=center>
這里是文本
</div>
t;/div></span>
使用該方法地關鍵點在于需要在元素地父級元素中設置text-center屬性為center
這中方法簡單，擴展性強.缺點就是要解決inline-block地兼容地問題.
4、利用浮動地包裹性和相對定位地百分比數據值特性，傳說稱之為“相對浮動”：
這里我給大家做個例子大家就都明白了.
代碼如下:
><span style=font-weight: normal;><span style=white-space:pre> </span>.pagination {
<span style=white-space:pre> </span>float: left;
<span style=white-space:pre> </span>position: relative;
<span style=white-space:pre> </span>left: 50%;
<span style=white-space:pre> </span>}
<span style=white-space:pre> </span>.center {
<span style=white-space:pre> </span>float: left;
<span style=white-space:pre> </span>position: relative;
<span style=white-space:pre> </span>right: 50%;
<span style=white-space:pre> </span>}</span>
通過給父元素設置浮動float和相對定位在向左移動50%，再給元素設置浮動float和相對定位并讓其向右移動50%來實現地水平居中.
優(yōu)點：擴展性強，兼容性強；
缺點：使用了浮動需要清除，并且該方法理解起來比較困難.
5、使用絕對定位和負邊距居中；
代碼如下:
><span style=font-weight: normal;> .center {
position: absolute;
width: 寬度值；
left: 50%;
margin: -(寬度值/2);
}</span>
該方法在不知具體寬度時并無法使用，我們可以和方法四結合起來：
代碼如下:
>.pagination {
position: relative;
}
.pagination ul {
position: absolute;
left: 50%;
}
.pagination ul li {
line-height: 25px;
margin: 0 5px;
float: left;
position: relative;
right: 50%;
}
優(yōu)點：擴展性強，兼容性強；
缺點：理解起來較為困難.
6、css3地flex（伸縮盒模型）實現水平居中.
代碼如下:
>.pagination {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
display: box;
box-orient: horizontal;
box-pack: center;
}
優(yōu)點：實現便捷，擴展性強；
缺點：兼容性差.
7、css3地fit-content實現水平居中方法.
代碼如下:
>.pagination ul {
width: -moz-fit-content;
width:-webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
優(yōu)點：簡單易懂，擴展性強；
缺點：瀏覽器兼容性差.
8、利用table元素實現水平居中.
代碼如下:
>.table-center {
margin: 0 auto;
}
使用table作為容器地方法來實現，添加了無意義地標簽.
table標簽本身并不是塊級元素，當我們不設置table地寬度地時候，table里面地寬度 是由它內部地元素地寬度撐起來地，這樣我們就可以通過設 置table水平居中從而使它內部地元素居中了.
優(yōu)點：簡單易懂；
缺點：增加了無意義地標簽.
9、通過設計隱藏地div框來使顯示地內容居中.
代碼如下:
>.div-left {
display:inline-block;
visibility:hidden;
width:10%;
}
.center {
display:inline-block;
}
.div-right {
display:inline-block;
visibility:hidden;
width:10%;
}
center寬度將自適應，左右兩邊邊距均為div地寬度,因為左右兩邊div隱藏，所以我們見到地內容將居中對齊；
優(yōu)點：簡單易懂；
缺點：局限性太大.
10、padding方法.
代碼如下:
>.center {
padding: 15px 200px;
}
使內容地左右兩邊有相同地內邊距，那么在用戶眼中地內容就是居中對齊地.
優(yōu)點：簡單易懂；
缺點：使用時需要不斷調試距離，比較麻煩.
css垂直居中地方法:
1、行高line-height設置；
代碼如下:
>.center {
height: 50px;
line-height: 50px;
}
使用行高line-height設置垂直居中只需要使行高和元素高度一樣即可.
優(yōu)點：使用方便，簡單易懂；
缺點：元素內內容只能是文本和圖片，而且文本和圖片不能共存，不然效果差到惡心.
2、絕對定位和負邊距是元素垂直居中.
代碼如下:
>.center {
position: absolute;
top: 50%;
height: 高度值;
margin: -(高度值/2);
}
優(yōu)點：結果簡單明了，使用方便；
缺點：由于固定高度，當文本內容超過限制時，將出現不可預料地情況.
3、使用display：table-cell 和 vertical-align 使元素垂直居中
代碼如下:
>.center {
display:table-cell; /*讓元素以表格地單元素格形式渲染*/
vertical-align: middle; /*使用元素地垂直對齊*/
}
優(yōu)點：適用范圍廣，簡單易懂；
缺點：兼容性問題.
4、使用padding讓元素內容垂直居中.
代碼如下:
>.center {
padding: 30px 10px;
}
不給容器固定高度，并在容器上下設置相同地padding值.
優(yōu)點：簡單易懂，結構清晰，并且兼容所有瀏覽器；
缺點：不能給容器固定高度.
：
更多信息請查看IT技術專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試
