實現(xiàn)水平居中的辦法

原文

博客原文

大綱

1侥涵、margin和width實現(xiàn)水平居中
2眉抬、inline-block實現(xiàn)水平居中方法
3唐责、浮動實現(xiàn)水平居中的方法
4暖途、絕對定位實現(xiàn)水平居中
5卑惜、CSS3的flex實現(xiàn)水平居中方法
6、CSS3的fit-content實現(xiàn)水平居中方法

通過實例實現(xiàn)水平居中——以分頁標(biāo)簽為實例
最初效果
<!DOCTYPE
 html PUBLIC "-//W3C//DTD
 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
 http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style:none;
    }
    .pagination li {
        line-height: 25px;
    }
    .pagination a {
        display: block;
        color: #f2f2f2;
        text-shadow: 1px 0 0 #101011;
        padding: 0 10px;
        border-radius: 2px;
        box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
        background: linear-gradient(top,#434345,#2f3032);
        background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
    }
    .pagination a:hover {
        box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
        background: linear-gradient(top,#f48b03,#c87100);
        background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
    }
</style>
</head>
 
<body>
<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
</body>
</html>
最初效果
1驻售、margin和width實現(xiàn)水平居中

第一種方法是最古老的實現(xiàn)方案露久，也是大家最常見的方案，在分頁容器上定義一個寬度欺栗，然后配合margin的左右值為“auto”實現(xiàn)效果毫痕。
優(yōu)點：實現(xiàn)方法簡單易懂，瀏覽器兼容性強迟几；
缺點：擴展性差消请，無法自適應(yīng)未知項情況。

<!DOCTYPE html>
<html>
<head>
<meta
 http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style:none;
    }
    .pagination { 
        width: 400px; 
        margin-left: auto; 
        margin-right: auto; 
        /*可以使用簡寫形式：margin:0 auto;*/
    }
    .pagination li {
        line-height: 25px;
        display: inline;
        float: left;
        margin: 0 5px;
    }
    .pagination a {
        display: block;
        color: #f2f2f2;
        text-shadow: 1px 0 0 #101011;
        padding: 0 10px;
        border-radius: 2px;
        box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
        background: linear-gradient(top,#434345,#2f3032);
        background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
    }
    .pagination a:hover {
        box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
        background: linear-gradient(top,#f48b03,#c87100);
        background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
    }
    /*清除ul的浮動类腮，形成一個BFC
    .clearfix:after{
        content: '';
        height: 0;
        line-height:0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
    */
</style>
</head>
 
<body style="background:gray;">
<div class="pagination">
  <ul class="clearfix">
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
</body>
</html>
margin和width實現(xiàn)水平居中
2梯啤、inline-block實現(xiàn)水平居中方法

這個方法相對來說也是簡單易懂，但使用了inline-block解決了水平居中的問題存哲，卻又產(chǎn)生了一個新的問題，就是分頁項與分頁項由回車符帶來的空白間距七婴，那么不知情的同學(xué)就會不知道如何解決祟偷？（而且這個間距并不是所有瀏覽器都有），所以需要解決下inline-block帶來的間距打厘。
優(yōu)點：
1. 高度可變
2. 內(nèi)容溢出會將父元素?fù)伍_修肠。
3. 支持跨瀏覽器，也適應(yīng)于IE7户盯。
4. 簡單易懂嵌施，擴展性強廊镜；
缺點：
1. 需要一個容器
2. 水平居中依賴于margin-left: -0.25em;該尺寸對于不同的字體/字號需要調(diào)整簸喂。
3. 內(nèi)容塊寬度不能超過容器的100% - 0.25em。
4. 需要額外處理inline-block的瀏覽器兼容性的畴。

<!DOCTYPE html>
<html>
<head>
<meta
 http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style:none;
    }
    .pagination { 
        text-align: center;
        font-size: 0; 
        letter-spacing: -4px; 
        word-spacing: -4px;
    }
    .pagination ul{
        display:inline-block;
    }
    .pagination li {
        line-height: 25px;
        display: inline;
        float: left;
        margin: 0 5px;
        zoom:1;
        letter-spacing:normal;
        word-spacing:normal;
        font-size:12px;
    }
    .pagination a {
        display: block;
        color: #f2f2f2;
        text-shadow: 1px 0 0 #101011;
        padding: 0 10px;
        border-radius: 2px;
        box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
        background: linear-gradient(top,#434345,#2f3032);
        background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
    }
    .pagination a:hover {
        box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
        background: linear-gradient(top,#f48b03,#c87100);
        background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
    }
    .clearfix:after{
        content: '';
        height: 0;
        line-height:0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
 
<body style="background:gray;">
<div class="pagination">
  <ul class="clearfix">
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
</body>
</html>
3硫眨、浮動實現(xiàn)水平居中的方法

這種方法實現(xiàn)和前面的與眾不同足淆，使用了浮動配合position定位實現(xiàn)。
優(yōu)點：兼容性強，擴展性強巧号；
缺點：實現(xiàn)原理較復(fù)雜族奢。

<!DOCTYPE html>
<html>
<head>
<meta
 http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style:none;
    }
    .pagination { 
        float:left;
        width:100%;
        overflow:hidden;
        position:relative;
    }
    .pagination ul{
        clear:left;
        float:left;
        position:relative;
        left:50%;/*整個分頁向右移動寬度的50%*/
        text-align:center;
    }
    .pagination li {
        line-height: 25px;
        margin: 0 5px;
        display: block;
        float: left;
        position:relative;
        right:50%;/*將每個分頁項向左移動寬度的50%*/
    }
    .pagination a {
        display: block;
        color: #f2f2f2;
        text-shadow: 1px 0 0 #101011;
        padding: 0 10px;
        border-radius: 2px;
        box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
        background: linear-gradient(top,#434345,#2f3032);
        background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
    }
    .pagination a:hover {
        box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
        background: linear-gradient(top,#f48b03,#c87100);
        background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
    }
    .clearfix:after{
        content: '';
        height: 0;
        line-height:0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
 
<body style="background:gray;">
<div class="pagination">
  <ul class="clearfix">
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
</body>
</html>
4、絕對定位實現(xiàn)水平居中

這種實現(xiàn)我們有一個難題丹鸿，我并不知道元素的寬度是多少越走，這樣也就存在如方法一所說的難題，但我們可以借助方法三的原理靠欢，即相對定位來做一點變通廊敌。
優(yōu)點：擴展性強，兼容性強;
缺點：理解性難掺涛。

<!DOCTYPE html>
<html>
<head>
<meta
 http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style:none;
    }
    .pagination { 
        position:relative;
    }
    .pagination ul{
        position:absolute;
        left:50%;
    }
    .pagination li {
        line-height: 25px;
        margin: 0 5px;
        float: left;
        position:relative;/*注意這里不能是absolute*/
        right:50%;
    }
    .pagination a {
        display: block;
        color: #f2f2f2;
        text-shadow: 1px 0 0 #101011;
        padding: 0 10px;
        border-radius: 2px;
        box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
        background: linear-gradient(top,#434345,#2f3032);
        background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
    }
    .pagination a:hover {
        box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
        background: linear-gradient(top,#f48b03,#c87100);
        background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
    }
    .clearfix:after{
        content: '';
        height: 0;
        line-height:0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
 
<body style="background:gray;">
<div class="pagination">
  <ul class="clearfix">
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
</body>
</html>
5庭敦、CSS3的flex實現(xiàn)水平居中方法

CSS3的flex是一個很強大的功能，她能讓我們的布局變得更加靈活與方便薪缆，唯一的就是目前瀏覽器的兼容性較差秧廉。
display:box是2009年以前的關(guān)于flex的用法，是需要加上前綴的
display:flex是之后的用法拣帽，也是以后的標(biāo)準(zhǔn)用法
優(yōu)點：實現(xiàn)便捷疼电，擴展性強
缺點：兼容性差。

<!DOCTYPE html>
<html>
<head>
<meta
 http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style:none;
    }
    .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; 
    }
    .pagination li {
        line-height: 25px;
        margin: 0 5px;
        float: left;
    }
    .pagination a {
        display: block;
        color: #f2f2f2;
        text-shadow: 1px 0 0 #101011;
        padding: 0 10px;
        border-radius: 2px;
        box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
        background: linear-gradient(top,#434345,#2f3032);
        background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
    }
    .pagination a:hover {
        box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
        background: linear-gradient(top,#f48b03,#c87100);
        background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
    }
    .clearfix:after{
        content: '';
        height: 0;
        line-height:0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
 
<body style="background:gray;">
<div class="pagination">
  <ul class="clearfix">
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
</body>
</html>
6减拭、CSS3的fit-content實現(xiàn)水平居中方法

“fit-content”是CSS中給“width”屬性新加的一個屬性值蔽豺，他配合margin可以讓我輕松的實現(xiàn)水平居中的效果：
優(yōu)點：簡單易懂，擴展性強;
缺點：瀏覽器兼容性差

<!DOCTYPE html>
<html>
<head>
<meta
 http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style:none;
    }
    .pagination ul{
        width: -moz-fit-content;
        width:-webkit-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .pagination li {
        line-height: 25px;
        margin: 0 5px;
        float: left;/*需要加上這個樣式拧粪，不然同樣達(dá)不到效果*/
    }
    .pagination a {
        display: block;
        color: #f2f2f2;
        text-shadow: 1px 0 0 #101011;
        padding: 0 10px;
        border-radius: 2px;
        box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
        background: linear-gradient(top,#434345,#2f3032);
        background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
    }
    .pagination a:hover {
        box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
        background: linear-gradient(top,#f48b03,#c87100);
        background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
    }
    .clearfix:after{
        content: '';
        height: 0;
        line-height:0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
 
<body style="background:gray;">
<div class="pagination">
  <ul class="clearfix">
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>
</body>
</html>
參考網(wǎng)站

https://www.w3cplus.com/css/elements-horizontally-center-with-css.html
http://blog.csdn.net/freshlover/article/details/11579669

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末修陡，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子可霎，更是在濱河造成了極大的恐慌魄鸦，老刑警劉巖，帶你破解...
    沈念sama閱讀 222,183評論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件癣朗，死亡現(xiàn)場離奇詭異拾因，居然都是意外死亡，警方通過查閱死者的電腦和手機旷余，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門绢记，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人正卧，你說我怎么就攤上這事蠢熄。” “怎么了炉旷？”我有些...
    開封第一講書人閱讀 168,766評論 0贊 361
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵护赊，是天一觀的道長惠遏。 經(jīng)常有香客問我，道長骏啰，這世上最難降的妖魔是什么节吮？ 我笑而不...
    開封第一講書人閱讀 59,854評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮判耕，結(jié)果婚禮上透绩，老公的妹妹穿的比我還像新娘。我一直安慰自己壁熄，他們只是感情好帚豪，可當(dāng)我...
    茶點故事閱讀 68,871評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著草丧，像睡著了一般狸臣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上昌执，一...
    開封第一講書人閱讀 52,457評論 1贊 311
  • 城市分裂傳說
    那天烛亦，我揣著相機與錄音，去河邊找鬼懂拾。 笑死煤禽，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的岖赋。 我是一名探鬼主播檬果，決...
    沈念sama閱讀 40,999評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼唐断！你這毒婦竟也來了选脊？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,914評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤脸甘，失蹤者是張志新（化名）和其女友劉穎恳啥，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斤程，經(jīng)...
    沈念sama閱讀 46,465評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年菩混，在試婚紗的時候發(fā)現(xiàn)自己被綠了忿墅。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,675評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡沮峡，死狀恐怖疚脐，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情邢疙，我是刑警寧澤棍弄，帶...
    沈念sama閱讀 36,354評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布望薄，位于F島的核電站，受9級特大地震影響呼畸，放射性物質(zhì)發(fā)生泄漏痕支。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一蛮原、第九天 我趴在偏房一處隱蔽的房頂上張望卧须。 院中可真熱鬧，春花似錦儒陨、人聲如沸花嘶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0贊 25
  • 一樁弒父案蹦漠，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽椭员。三九已至，卻和暖如春笛园，著一層夾襖步出監(jiān)牢的瞬間隘击，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工喘沿， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留闸度，地道東北人。 一個月前我還...
    沈念sama閱讀 49,091評論 3贊 378
  • 代替公主和親
    正文 我出身青樓蚜印，卻偏偏與公主長得像莺禁，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子窄赋，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,685評論 2贊 360

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案哟冬？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,760評論 1贊 92
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號可收聽更多音頻 前言 關(guān)于網(wǎng)...
    itclanCoder閱讀 8,188評論 3贊 30
  • 1. 前言 前端圈有個“梗”：在面試時忆绰，問個css的position屬性能刷掉一半人浩峡，其中不乏工作四五年的同學(xué)。在...
    YjWorld閱讀 4,468評論 5贊 15
  • A 抽象類 接口 多態(tài)（意義） 強制轉(zhuǎn)型 instanceof關(guān)鍵字 匿名內(nèi)部類
    Junglerengar閱讀 119評論 1贊 0
  • 第一次在簡書寫文错敢，也臨近畢業(yè)翰灾。近來我的眼里常含淚水，我發(fā)現(xiàn)對這片地愛的深沉稚茅。 起初我認(rèn)為自己不會對這破地產(chǎn)生任何眷...
    宋建Maker閱讀 240評論 1贊 1