關於css水平居中的分析-css教學-PHP中文網

首頁

web前端

css教學

關於css水平居中的分析

高洛峰

Mar 08, 2017 pm 02:12 PM

水平居中是常用的幾種佈局方式之一。主要分為行內元素的居中，塊元素的居中。塊元素的居中也分為固定寬度的居中，不定寬度的居中。行內元素的居中，使用text-align:center就可以實現，已知寬度的塊元素的居中，使用絕對定位以及設置

margin為寬的一半的負值就可以實現。但是不定寬度的居中比起上面兩種更常用，也更複雜，我們常常需要在分頁的頁碼展示等地方用到不定寬居中，使用起來更方便，下面來研究下常用的幾種塊元素的水平居中。

1.標籤巢狀偏移

實作原理：

聯想到固定寬度的居中的實作：先偏移到螢幕中央，在設定其margin方向偏移寬的一半。那麼能不能想到一種方法，借用這種思路，先偏移50%到螢幕的右半部分，然後在反方向偏移回來？實現起來比較困難的點是不知道這個寬度是多少。又想到只要讓其父寬度和子寬度相等，然後用百分數就可以解決。那麼要怎麼讓其父寬度和字寬度一樣呢？巧借float具有的包裹性：父元素如果漂浮了，並且沒有設定寬高，那麼將盡量包裹子元素。

實作程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不定宽度水平居中</title>
    <style>
        body{  
            background-color: #e5da31;  
        }  
        .container{  
            position: absolute;   /*脱离文档流，其宽度将由子元素的宽度决定*/  
            left:50%;  
        }  
        .content{  
            position: absolute;  
            left:-50%;  
            background-color: #2ecc71;  
        }  
    </style>
</head>
<body>
<p class="container">
    <p class="content">标签嵌套</p>
</p>
</body>
</html>

登入後複製

實作效果：

關於css水平居中的分析

優點與缺點：

缺點很明顯，需要自己寫和文件內容無關的標籤，多打了幾行程式碼相容性良好，在ie6+瀏覽器上查看沒有問題

#2.flex-box佈局

實作原理：

先定義一個flex容器，然後設定其內容對齊方式為中間對齊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不定宽度水平居中</title>
    <style>
        body {  
            background-color: #e5da31;  
        }  
        .container {  
            display: flex;  /*定义一个flex容器*/  
            justify-content: center;  /*定义容器的空间没有被全部占用时，内容的对其方式*/  
        }  
        .content{  
            background-color: #2ecc71;  
        }  
    </style>
</head>
<body>
<p class="container">
    <p class="content">标签嵌套</p>
</p>
</body>
</html>

登入後複製

實作效果：

關於css水平居中的分析

優缺點分析：

實作起來最簡單，但是呢，因為flex的相容性不好，當要相容低階瀏覽器時慎重使用。

3.內嵌佈局

實作原則：

text-align:center可以讓行內元素水平居中，如果改變塊元素為行內元素，在使用text-align就可以實現水平居中。

實作程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不定宽度水平居中</title>
    <style>
        body{  
            background-color: #e5da31;  
        }  
        .container{  
          text-align:center;  
        }  
        .content{  
        display: inline;  
            background-color: #2ecc71;  
        }  
    </style>
</head>
<body>
<p class="container">
    <p class="content">标签嵌套</p>
</p>
</body>
</html>

登入後複製

實現效果：

關於css水平居中的分析 #