CSS 技巧篇(七)：設置元素居中

時間 2019-11-08

標籤 css 技巧設置元素居中欄目 CSS 简体版

原文原文鏈接

如下將整理關於使用CSS使元素居中的一些方法瀏覽器

案例模版：bash

<body>
    <div id="main">
        <div id="center">這個塊居中</div> 
    </div>
</body>

<style>
    body{
        height: 200px;
    }
    #main{
        border:1px red solid;
    }
    #center{
        border: 1px green solid;
    }
</style>
複製代碼

1、水平居中

一、使用margin:0 auto配合元素的width

#center{
    width: 100px;
    margin: 0 auto;
}
複製代碼

要讓居中元素知足兩個條件：其一，元素須要有一個固定寬度值；其二元素的margin-left和margin-right都必須設置爲auto，這兩個條件少了任何一個都沒法讓元素達到水平居中的效果。flex

缺點：須要固定居中元素的寬度。spa

注意：當元素處於position:absolute;時，margin:0 auto無效，須要將right於left都設爲0才能夠，以下所示：3d

#center{
    width: 100px;
    margin: 0 auto;
    position:absolute;
    right:0;
    left:0;
}
複製代碼

二、使用絕對定位配合margin

#center{
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -100px; /*值爲width的一半*/
} 
複製代碼

居中元素設置一個負的「margin-left」而且值等於寬度的一半，另外若是元素不是相對於瀏覽器的話，還須要在其父元素上設置一個相對定位「position: relative」。code

缺點：須要固定居中元素的寬度。orm

以上兩種方式都必須設置固定的寬度值，下面將解決不須要固定寬度值的方法。cdn

三、塊級父元素讓行內元素居中

#main{
    text-align: center;
}
複製代碼

對居中元素的父元素設置text-align屬性。blog

優勢：不須要設置元素的固定寬度。string

缺點：居中元素必須是inline或者設置爲inline-block。

四、利用relative定位與行內樣式

#main{
    display: inline-block;
    position: relative;
    left: 50%;
}
#center{
    display: inline-block;
    position: relative;
    right: 50%;
}
複製代碼

一、將#main與#center所有設置爲inline-block，將包裹他們的內容：

二、將#main往右移其寬度的50%：

三、而後將#center往左移其寬度的50%：

四、最終#center元素居中。

優勢：不須要設置元素的固定寬度。

缺點：居中元素的元素被設置爲inline-block。

五、經過transform進行設置

#main{
    position: relative;
}
#center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
複製代碼

首先left:50%先右移#main50%的寬度，而後經過translateX(-50%)在左移自己50%的寬度。

優勢：不須要設置元素的固定寬度。

缺點：居中元素被設置爲absolute。

六、經過flex-box

#main{
    display: flex; 
    justify-content: center; 
}
複製代碼

優勢：不須要設置元素的固定寬度。

缺點：父元素被設置爲flex。

2、垂直居中

一、經過line-height

#main{
    height: 200px;
    line-height: 200px;
}
複製代碼

居中元素的父元素必需要設置準確height數值。而且居中元素若是是多行文本將錯亂。這種方式適合小元素，單行文本。

缺點：須要固定父元素的height值，而且居中元素若是是多行文本將錯亂。僅適合小元素，單行文本。

二、使用絕對定位搭配margin

#main{
    position: relative;
}
#center{
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px; /*值爲height的一半*/
}
或
#center{
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
}
複製代碼

缺點：須要固定居中元素的height值。

以上兩種方式都必須設置固定的height值，下面將解決不須要固定heignt值的方法。

三、經過table-cell與vertical-align

#main{
    height: 100%;
    display: table;
}
#center{
    display: table-cell;
    vertical-align: middle;
}
複製代碼

父元素設置爲display:table;子元素設置爲display:table-cell;而且設置vertical-align:midden;

四、經過添加一個額外的標籤

<body>
    <div id="main">
        <div id="center">這個塊居中</div> 
        <div id="other"></div>
    </div>
</body>
<style>
#main{
    height: 100%;
}
#center,#other{
    display: inline-block;
    vertical-align: middle;
}
#other{
    height: 100%;
}
</style>
複製代碼

爲同一行的inline-block元素設置vertical-align：middle，該行內的inline-block元素會按照元素的垂直中心線對齊。

缺點：須要額外添加一個元素。

五、經過transform進行設置

#main{
    height:100%;
    position: relative;
}
#center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
複製代碼

首先top:50%先下移#main50%的高度，而後經過translateY(-50%)在上移自己50%的高度。

優勢：不須要設置元素的固定高度。

缺點：居中元素被設置爲absolute。

下移到#main50%的高度還有另外的方式

#center{
    margin:50% auto 0; //下移到#main50%的高度
    transform: translateY(-50%);
}
或
#center{
    margin:50vh auto 0; //下移到視口50%的高度
    transform: translateY(-50%);
}
複製代碼

六、經過flex-box

#main{
    height:100%;
    display: flex; 
    align-items: center; 
}
複製代碼

優勢：不須要設置元素的固定寬度。

缺點：父元素被設置爲flex。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。