css居中那點事兒

時間  2019-11-18
標籤 css 居中 那點 事兒 欄目 CSS 简体版
原文   原文鏈接

css居中那點事兒

　　在css中對元素進行水平居中是很是簡單的，然而使元素垂直居中就不是一件簡單的事情了，多年以來，垂直居中已經成爲了CSS領域的聖盃，由於它是極其常見的需求，可是在實踐中卻不是一件簡單的事情。下面我會簡單介紹水平居中，並着重討論垂直居中。css

 

第一部分：水平居中

　　1.實現行內元素的居中。方法：在行內元素外面的塊元素的樣式中添加：text-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{text-align: center;}
        img{width: 200px;height: 200px;border: thin solid red;}
    </style>
</head>
<body>
    <div>
        <img src="pic.png">
    </div>
</body>
</html>

　注意：對於某個塊元素的居中，不能在其父元素的樣式中設置text-align:center，這是無效的。下面介紹塊元素的居中方式。html

 

    2.實現塊級元素的水平居中。

　　方法一：設置其左右兩邊的外補丁爲auto。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 200px;height: 100px;background: red;margin:0 auto;}
    </style>
</head>
<body>
        <div>this is a div</div>
</body>
</html>

 

　　注意：若是塊級元素是body的直接子元素，不設置寬，則默認100%，看不出效果；不設置高，且div中沒有內容，則高度默認爲0。所以，必定要同時設置塊級元素的寬和高，這樣才能看出來效果。對於在一個div中的另外一個div但願居中，也能夠使用這個方式，由於這時的margin是相對於其父元素而言的。css3

   

 

　 方法二：使用絕對定位和負邊距。

　　代碼以下所示：函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
        #son{
            width: 100px;height: 100px;background: #aaa;text-align: center;
            position: absolute; left: 50%; margin-left: -50px;
　          /*注意：由於絕對定位是left的值是相對於son的最左邊爲50%，因此須要使用margin-left再向左偏移寬度的一半  */

        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son">faas</div>
    </div>    
</body>
</html>

 

　　效果圖以下：字體

 

　　

第二部分：垂直居中

　　1.行內元素的垂直居中

　　　A　咱們在寫導航菜單時，每每採用將<a>標籤寫入float的<li>中，且爲了美觀，咱們經常須要將a標籤中的內容水平居中和垂直居中。水平居中咱們在上面已經介紹了，經過在字體的父元素內設置text-align:center;便可實現。那麼垂直居中呢？對於文字而言，咱們只須要將行高設置爲字體所在塊元素的高度便可。flex

　　　　html代碼以下：this

<body>
    <ul>
        <li><a href="">我</a></li>
        <li><a href="">是</a></li>
        <li><a href="">導</a></li>
        <li><a href="">航</a></li>
        <li><a href="">的</a></li>
    </ul>    
</body>

 

　　     css代碼以下：spa

    <style>
        *{padding: 0;margin: 0;list-style: none;text-decoration: none;}
        ul li{float: left;/*width: 40px;height: 40px;*/}
        a{display: block;width: 70px;height: 40px;background: #daa541;border:1px solid red;text-align: center;line-height: 40px;}
    </style>

 

　　 我把a標籤的display屬性值修改成了block，因此咱們就能夠修改a標籤的寬度和高度了，由於li是包含a的，li會由其中的內容（即a標籤）撐開，因此在li中的width和height是不須要設置的。3d

　　 由於a成爲了塊級元素，因此水平居中只須要在a中添加text-decoration:none;便可。將line-height的高度和height的高度設置爲相同的，就能夠實現垂直居中了。code

   

    B 若是要對a標籤中的字體居中，實際上還有一種更爲簡單的方法。

　　即將a的display屬性設置位block以後，不設置其寬度和高度（li的寬度和高度也不設置），爲了看清楚，咱們能夠給a加border，這時獲得的效果圖以下：

        

 

　　即a的大小徹底是由字體撐開的，這時咱們能夠經過設置上下左右的padding值達到與A方法相同的效果。html代碼與A中相同，css代碼以下：

 

        *{padding: 0;margin: 0;list-style: none;text-decoration: none;}
        ul li{float: left;}
        a{display: block;background: #daa541;border:1px solid red; padding:10px 30px;}

 

　　你們能夠看到，這裏我只設置了上下padding值爲10px，左右padding值爲30px;在A中的width height text-align(實現水平居中) line-height(實現豎直居中)這些屬性全都沒有設置，只使用了padding:10px 30px;來代替，因此這種方法是值得推薦的。

　　效果圖以下：

     C 另一種方法也能夠實現行內元素的垂直居中。

代碼以下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;  display:table-cell; vertical-align: middle;}
    </style>
</head>
<body>
    <div id="parent">
        <span>faas</span>
    </div>    
</body>
</html>

 

 

 

　　即咱們將id爲parent的div元素的display屬性值設置位table-cell，這時，即讓標籤元素以表格單元格的形式呈現，相似於td標籤。這時就能夠經過設置vertical-align來實現垂直居中了。但值得注意的是：table-cell會被其餘一些css屬性破壞，好比float和position:absolute等等。且一旦設置位table-cell，這時margin就不能用了。這種方法也能夠用於塊級元素的垂直居中。

 

 

　　也能夠使用display:flex; 以及 align-items:center;  可是這樣就不能用text-align:center;

 

　　2.塊級元素的垂直居中。

　　　方法一：使用絕對定位和負邊距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
        #son{
            width: 100px;height: 100px;background: #aaa;text-align: center;
            position: absolute;top: 50%;margin-top: -50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son">faas</div>
    </div>    
</body>
</html>

　　　

    方法二：使用display：table-cell;方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;  display:table-cell; vertical-align: middle;}
    </style>
</head>
<body>
    <div id="parent">
        <div>faas</div>
    </div>    
</body>
</html>

 

　　你們能夠看出，這個方法與行內元素的垂直居中並無什麼區別。

　　

　　方法三：使用display:flex;代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
               display: flex; align-items:center; }
        #parent>div{background: red;width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div id="parent">
        <div>faas</div>
    </div>    
</body>
</html>

 

　　

　　在父元素中添加display:flex;align-items:center;便可實現豎直居中。

 

 

第三部分：水平豎直同時居中（重點）

方法一：使用絕對定位和負邊距

　　　　代碼以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
        #son{
            width: 100px;height: 100px;background: #aaa;text-align: center;
            position: absolute;top: 50%;margin-top: -50px; left: 50%;margin-left: -50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son">faas</div>
    </div>    
</body>
</html>

 

　　效果以下：

 

方法二：使用display：flex

　　　　代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
               display: flex; align-items:center;  justify-content:center;}
        #parent>div{background: red;width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div id="parent">
        <div>faas</div>
    </div>    
</body>
</html>

 

　　即只須要在父元素的樣式中添加display：flex；align-items:center實現豎直居中，justify-content:center;實現水平居中。

 

　　

方法三：一樣使用display:flex.

　　代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
               display: flex; }
        #parent>div{background: red;width: 100px;height: 100px; margin: auto;}
    </style>
</head>
<body>
    <div id="parent">
        <div>faas</div>
    </div>    
</body>
</html>

 

　　咱們發現只須要在父元素中設置display:flex;在子元素中設置margin：auto。

 

 

方法四：使用css3屬性

　　在方法一中，咱們必須知道子元素的width和height才能使用負邊距使其居中，可是若是其width和height不是肯定的值，這個方法就不可用了。下面這種使用css變形屬性的方法能夠很好的解決這一問題，由於translate()變形函數中使用的百分比值時，是以這個元素自身的寬度和高度爲基準進行換算和移動的。舉例以下：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中方法</title>
    <style>
        #father{
            position: relative;
            width: 500px;
            height: 500px;
            background: #ccc;
        }
        #son{
            position: absolute;
            top:50%;
            left:50%;
            width: 100px;
            background: #ddd;
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">子元素，沒有設置高度。子元素，沒有設置高度。子元素，沒有設置高度。子元素，沒有子元素，沒有設置高度。</div>
    </div>
</body>
</html>

代碼中我只設置了寬度，而沒有設置高度，即高度自適應，最終效果以下所示：

　　即便咱們添加或減小內容，也能夠達到垂直居中的目的！

　　

方法五：

　　在父元素中使用position:relative;在子元素中使用position:absolute;將其margin值設置爲auto；而且四個方向都設置爲0便可。

　　代碼以下所示：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中方法</title>
    <style>
        .parent{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .son{
            position: absolute;
            width: 50px;
            height: 50px;
            
            margin:auto;
            left:0;right: 0;top: 0;bottom: 0;
            /*使用margin:auto和四個方向都是0，有一種五馬分屍的感受*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">
            居中元素
        </div>
    </div>
</body>
</html>

　　最終效果以下所示：

　　

　　這樣作的好處就是咱們咱們不須要知道父元素和子元素的寬度和高度，而只要使其尺寸固定便可。

 　　注：原創文章，如需轉載，請註明出處。博客地址：http://www.cnblogs.com/zhuzhenwei918/p/6158433.html

盡吾志也而不能至者，能夠無悔矣，其孰能譏之乎？

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程