摘要:包括水平居中,垂直居中,還有水平垂直居中。如果要再要細分,還要分浮動元素絕對定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中,比較特殊。
2018.05.29
居中一個元素?你會想到啥?這里面的知識還真不少。包括水平居中,垂直居中,還有水平垂直居中。目錄:
如果要再要細分,還要分浮動元素、絕對定位的居中。為了代碼簡介,沒有加背景和其他樣式,需要看效果的,可以加上背景。
第一部分:水平居中
1、常規元素的水平居中
行內元素、不定寬塊級元素:text-align
圖片的水平居中 :clear + display + margin
定寬塊級元素:margin:0 auto;
通用方法(不管行還是塊元素,通殺):flex
2、浮動元素的水平居中
定寬元素:relative + margin-left + left
不定寬元素:父float + 父relative + 子relative
通用(不管是定寬還是不定寬,通殺):flex
3、絕對定位元素的水平居中
定寬的元素:relative + left + ...
不定寬的元素:relative + left + translateX
通用方式:不管是否寬度,通殺 flex
4、總結:水平居中的通用方式(包含常規元素、浮動、絕對定位):flex
第二部分:垂直居中
1、常規元素的垂直居中
行內文本元素:line-height
通用(不管行級,塊級元素,圖片,都通殺)tabel-cell + vertical-align 或 flex
2、浮動元素的垂直居中
定高的元素:(relative + absolute + line-height) + top/bottom或margin-top
通用方式: flex
3、絕對定位元素的垂直居中
利用絕對定位自身來垂直居中:translateY
通用:flex
4、總結:垂直居中的通用方式(包含常規元素、浮動、絕對定位):flex
第三部分:水平垂直居中
1、常規元素的水平垂直居中
通用(一列或多列):(table-cell + vertical-align + text-align) 或 flex
2、浮動元素的水平垂直居中
通用(一個或多列元素):flex
3、絕對定位元素的水平垂直居中
利用絕對定位來水平垂直居中:relative + translate
通用:flex
4、總結:水平垂直居中的通用方式(包含常規元素、浮動、絕對定位):flex
第一部分:水平居中 1、常規元素的水平居中行內元素、不定寬塊級元素:text-align
注意:將div#inner 換成 span#inner 效果一樣。
樣式: #outer {text-align:center}水平居中的元素
圖片的水平居中 :clear + display + margin
圖片的居中,比較特殊。
img { // 設置這三個屬性,就可以居中 clear: both; display: block; margin:auto; }水平居中的元素
定寬塊級元素:margin:0 auto;
注意:樣式是在inner元素中添加
樣式: #inner {width:200px;margin:0 auto;}水平居中的元素
通用方法(不管行還是塊元素,通殺):flex
#outer { display:flex; justify-content:center; }2、浮動元素的水平居中水平居中的元素
由于元素浮動之后,其本身就相當于設置了display:inline-block;也就是可以設置寬和高了。
所以浮動元素,沒有行級和塊之分,都是塊級或inline-block的元素;只有定寬和不定寬之分
參考:浮動與寬高
定寬元素:relative + margin-left + left
注意:樣式設置在浮動元素本身
樣式: #inner-float { position:relative; left:50%; margin-left:-100px; }我是要居中的浮動元素
不定寬元素:父float + 父relative + 子relative
注意:要清除浮動,給外部元素加上float。這里的父元素就是外部元素
#outer { float:left; position:relative; left:50%; } #inner-float { position:relative; left:-50%; 或 right:50% }我是要居中的浮動元素
通用(不管是定寬還是不定寬,通殺):flex
#outer { display:flex; justify-content:center; }3、絕對定位元素的水平居中我是要居中的浮動元素
由于元素絕對定位之后,其本身就相當于設置了display:inline-block;也就是可以設置寬和高了。
所以絕對定位元素,沒有行級和塊之分,都是塊級或inline-block的元素;只有定寬和不定寬之分
參考鏈接:絕對定位與寬度
定寬的元素:relative + left + ...
// 寫法一: #outer { position: relative; } #inner-absolute { left:50%; margin-left:-100px; } // 寫法二: #outer { position: relative; } #inner-absolute { left:0; right:0; margin:0 auto; }我是要居中的浮動元素
不定寬的元素:relative + left + translateX
#outer { position: relative; } #inner-absolute { left:50%; transform:translateX(-50%); // translateX是相對自身來計算的。 }我是要居中的浮動元素
通用方式:不管是否寬度,通殺 flex
#outer { display:flex; justify-content:center; }4、總結:水平居中的通用方式(包含常規元素、浮動、絕對定位):flex我是要居中的浮動元素
#outer { display:flex; justify-content:center; }第二部分:垂直居中我是要居中的常規、浮動、絕對定位元素,此辦法都適用
垂直居中,默認外部元素(這里稱為父元素)是有高度的常規元素的垂直居中
行內文本元素:line-height
#inner { line-height:40px; }我是要居中的浮動元素
通用(不管行級,塊級元素,圖片,都通殺)tabel-cell + vertical-align 或 flex
方式一:diaplay:tabel-cell; vertical-align #outer { display: table-cell; vertical-align: middle; } 方式二:flex + align-item #outer { display:flex; align-items:center; }我是垂直居中的元素
注意:#outer{height:100px;display:table} #inner{display:table-cell;vertical-align: middle;} 也可以達到垂直居中,但是不通用。2、浮動元素的垂直居中
定高的元素:(relative + absolute + line-height) + top/bottom或margin-top
方式一:relative + absolute + line-height + top/bottom #outer { position: relative; } #inner { line-height:100px; position: absolute; top: 0; bottom: 0; margin: auto; } 方式二:relative + absolute + line-height + margin-top #outer { position: relative; } #inner { line-height:100px; position: absolute; top: 50%; margin-top:-50px }我是垂直居中的元素
通用: flex
#outer { display:flex; align-items:center; }3、絕對定位的垂直居中我是垂直居中的元素
絕對定位元素相當于inline-block:沒有行和塊之分,只有定高和不定高之分。
利用絕對定位自身來垂直居中:translateY
#outer { position: relative; } #inner { top:50%; transform: translateY(-50%); // 相對自身向上移動 }我是垂直居中的元素
通用: flex
#outer { display: flex; align-items: center; } #inner { line-height:100px; }4、總結:垂直居中的通用方式(包含常規元素、浮動、絕對定位):flex我是垂直居中的元素
#outer { display: flex; align-items: center; } #inner { line-height:100px; }第三部分:水平垂直居中 1、常規元素的水平垂直居中我是垂直居中的常規、浮動、絕對定位元素
通用(一列或多列):(table-cell + vertical-align + text-align) 或 flex
方式1一:table-cell + vertical-align + text-align #outer { width:400px; // 方便看效果 height:500px; // 方便看效果 display:table-cell; vertical-align:middle; text-align:center; } #inner { display:inline-block; // 適合多列 }
通用:flex // 見下方
2、浮動元素的水平垂直居中子元素可以設置 mairgin 以及word-wrap:break-word; 方便效果
通用(一個或多列元素):flex // 見下方
3、絕對定位元素的水平垂直居中利用絕對定位來水平垂直居中:relative + translate
#outer { width:400px; // 方便看效果 height:500px; // 方便看效果 position: relative; } #inner { top:50%; left:50%; transform: translate(-50%, -50%); }我是水平垂直居中的元素
通用:flex :見下方
4、總結:水平垂直居中的通用方式(包含常規元素、浮動、絕對定位):flex#outer{ width:400px; // 方便看效果 height:500px; // 方便看效果 display:flex; justify-content:center; aligns-item:center; } #inner { display:inline-block; // 適合多列 }我是水平垂直居中的常規、浮動、絕對定位元素
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113384.html
摘要:源代碼演示利用將要水平排列的塊狀元素設為,然后在父級元素上設置,達到與上面的行內元素的水平居中一樣的效果。 前言 本文主要介紹水平居中,垂直居中,還有水平垂直居中各種辦法,思維導圖如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖,請猛戳Github個人博客 一、水平居中 1.行內元素水平居...
摘要:源代碼演示利用將要水平排列的塊狀元素設為,然后在父級元素上設置,達到與上面的行內元素的水平居中一樣的效果。 前言 本文主要介紹水平居中,垂直居中,還有水平垂直居中各種辦法,思維導圖如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖,請猛戳Github個人博客 一、水平居中 1.行內元素水平居...
摘要:源代碼演示利用將要水平排列的塊狀元素設為,然后在父級元素上設置,達到與上面的行內元素的水平居中一樣的效果。 前言 本文主要介紹水平居中,垂直居中,還有水平垂直居中各種辦法,思維導圖如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖,請猛戳Github個人博客 一、水平居中 1.行內元素水平居...
摘要:水平居中行內元素的水平居中在父元素中設置只對內聯元素或行內塊元素有效需要放置于父元素中塊級元素的水平居中只對塊級元素有效指的是自適應寬度。參考張鑫旭實現絕對定位元素的居中及原理居中方式水平居中垂直居中塊級元素設置內聯元素設置。 原文地址:https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個月也零零散散學...
摘要:上下左右負偽元素父容器上設置用于設置為行內元素的水平居中居中元素自身設置用于設置為塊級元素的水平居中元素寬度固定,且不能浮動絕對定位? 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...
閱讀 2477·2021-09-22 16:05
閱讀 2961·2021-09-10 11:24
閱讀 3631·2019-08-30 12:47
閱讀 2940·2019-08-29 15:42
閱讀 3379·2019-08-29 15:32
閱讀 1944·2019-08-26 11:48
閱讀 1081·2019-08-23 14:40
閱讀 902·2019-08-23 14:33