css 居中

魏明發布于2019-08-29 12:50 / 3025人閱讀

摘要：居中定義和用法簡寫屬性在一個聲明中設置所有外邊距屬性。上訴的第二種聲明并不能實現垂直居中的效果，具體可以看標準聲明或看下知乎的這篇文章。該方式需要居中元素的寬高確定。

css居中
1.margin:0 auto;
定義和用法
margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。

說明
這個簡寫屬性設置一個元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。
塊級元素的垂直相鄰外邊距會合并，而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心。

注釋：允許使用負值。

垂直外邊距之所以設計為可以在垂直方向合并主要是方便文本的排版，即一段文本分行的時候上下兩行直接的間距不會疊加。

簡寫的情況：

/*四個方向的外邊距
都是10px*/
margin: 10px;
/上下的外邊距都是10px，左右的外邊距20px/
margin: 10px 20px;
/上的外邊距都是10px，左右的外邊距是5px，下外邊距15px/
margin: 10px 5px 15px;
/四個值依次是上、右、下、左/
margin: 10px 5px 15px 20px;
/設為auto的計算方式/
margin: 0 auto; /常用的水平居中對齊方式/
margin: auto;
上述的auto的計算方式是父容器-子元素剩余部分瀏覽器自動計算，以上述的水平居中方式為例，左右的外邊距等于父容器減去子容器剩余部分的寬度均勻分配給左右，從而實現居中對齊的效果。

上訴的第二種聲明并不能實現垂直居中的效果，具體可以看w3c標準聲明或看下知乎的這篇文章。

margin使用百分比單位計算的情況
/百分比是按照父容器的寬度來計算的，務必注意/
margin: 20%;
從上我們可以知道通過margin如何實現水平居中。

2.text-align:center;
1）絕對定位實現垂直居中

position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
width:100px;
height:100px;

采用絕對定位加負外邊距的方式，首先上，左偏移父容器的50%;然后再自身偏移自己寬高的50%，從而實現垂直水平居中。該方式需要居中元素的寬高確定。

2）絕對定位且居中元素不知寬高的情`
`position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;`

在這里使用CSS3的transform:translate(-50%,-50%);屬性來實現元素自身的一個偏移

3）絕對定位+margin:auto;實現水平垂直居中

position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100px;
height:100px;
margin:auto;

轉載別人的主要自己看

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112185.html

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 評論0 收藏0
css-元素居中

摘要：一水平居中行內元素水平居中使用屬性可以實現在行內元素包括在塊級父元素水平居中。使用負已知高度寬度使用使用使用三水平垂直居中公共結構塊級元素垂直居中。本文重要是匯總了關于水平居中，垂直居中，還有水平垂直居中的各種方法。一、水平居中 1.行內元素水平居中使用text-align:center;屬性可以實現在行內元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 評論0 收藏0
CSS之各種居中

摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學過程中，居中這個問題經常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內元素才能進行居中。結語以上的方法基本上可以用完成各種情況的居中。前言在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學CSS過程中，居中這個問題經常困擾到我。那為什么CSS的居中這么煩人呢？我認為，這是因為CSS的居中方法以及它的適...

Labradors 2019-08-02 16:01 評論0 收藏0