關(guān)于css水平居中的小小探討

2024-07-11 08:33:50

字體：大中小

供稿：網(wǎng)友

水平居中是常用的幾種布局方式之一。主要分為行內(nèi)元素的居中，塊元素的居中。塊元素的居中還分為固定寬度的居中，不定寬度的居中。行內(nèi)元素的居中，使用text-align:center就可以實現(xiàn)，已知寬度的塊元素的居中，使用絕對定位以及設(shè)置
margin為寬的一半的負值就可以實現(xiàn)。但是不定寬度的居中比起上面兩種更常用，也更復(fù)雜，我們常常需要在分頁的頁碼展示等地方用到不定寬居中，使用起來更方便，下面來研究下常用的幾種塊元素的水平居中。

1.標簽嵌套偏移

實現(xiàn)原理：

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

實現(xiàn)代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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>
<div class="container">
    <div class="content">標簽嵌套</div>