水平垂直居中小結

xuxueli 發布于2019-08-29 16:35 / 1484人閱讀

摘要：相等的上下值三水平垂直居中絕對定位和負外邊距使用絕對定位實現水平垂直居中時，元素的和應該等于對應的和值的一半再取負值。相對定位或絕對定位均可絕對定位和布局能實現居中效果的方法還有很多，這里列出來的方法只是一小部分，日后會慢慢補充。

??我們在頁面布局中經常會遇到需要將內容水平/垂直居中的情況，現在我們就來梳理一下實現的方法。

一、水平居中

??1.行元素設置其父元素的text-align：center，適用于單行文本水平居中。
??2.塊元素設置其本身的左右margin為auto即可,適用于設置了一定寬高值的塊元素。
??3.使用flex

二、垂直居中

line-height

??使行元素垂直居中，可以設置行元素的line-height值，適用于單行文本垂直居中。
??若行元素所在的塊級父元素有固定高度，則使行元素的line-height值與其父元素的高度相等；若行元素所在的父元素沒有設置高度，則行元素設置的line-height值就是其父元素的高度。
??若要居中一張圖片，可以設置圖片的vertical-align：middle; 圖片的父元素設置line-height值。

??2.table-cell

??通過如下設置可以實現元素的垂直居中。
??#parent {display: table;}//此元素會作為塊級表格來顯示（類似

），表格前后帶有換行符。
??#child {
????display: table-cell;//此元素會作為一個表格單元格顯示（類似

和	） ????vertical-align: middle; ??} ??3.使用絕對定位和負外邊距 ??使用絕對定位實現垂直居中時，元素的margin-top應該等于對應的top值的一半再取負值。 ??#parent {position: relative;} ??#child { ????height: 30%; ????width: 50%; ????position: absolute; ????top: 50%; ????margin: -15% 0 0 0; ??} ??4.相等的上下padding值 ??#parent { ????padding: 5% 0; ??} ??#child { ????padding: 10% 0; ??} 三、水平垂直居中 ??1.絕對定位和負外邊距 ??使用絕對定位實現水平垂直居中時，元素的margin-top和margin-left應該等于對應的top和left值的一半再取負值。 ??#parent {position: relative;} ??#child { ????position: absolute; ????top: 50%; ????left: 50%; ????height: 30%; ????width: 50%; ????margin: -15% 0 0 -25%; ??} ??2.定位和transform ??transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。2D 轉換方法，通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 坐標）和 top（y 坐標）位置參數，默認以元素的中心點為基點，x,y如果為負就反方向移動。這種方法類似于上一種使用負邊距。 ??#parent {position: relative;} ??#child { ????position: fixed;//相對定位或絕對定位均可 ????width:500px; ????height:300px; ????top: 50%; ????left: 50%; ????transform: translate(-50%, -50%); ??} ??3.絕對定位和margin:auto ??#parent {position: relative;} ??#child { ????width: 50%; ????height: 30%; ????position: absolute; ????top: 0; ????bottom: 0; ????left: 0; ????right: 0; ????margin: auto; } ??4.flex布局 ??div{ ????display: flex; ????justify-content:center; ????align-items:Center; ??} ??能實現居中效果的方法還有很多，這里列出來的方法只是一小部分，日后會慢慢補充。參考文章1：https://www.cnblogs.com/hutuz... 參考文章2：https://blog.csdn.net/liufeif... GPU云服務器云服務器水平垂直居中垂直居中實現垂直居中文字垂直居中文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113842.html 上一篇：一個常年更新的CSS采坑合集下一篇：css還可以這么寫？相關文章垂直水平居中方法小結摘要：前言最近看到很多面試題目會問請說出幾種使用完成垂直水平居中的方法正好看基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小結。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實現垂直居中，再使用來實現水平居中。前言：最近看到很多面試題目會問：請說出幾種使用css完成垂直水平居中的方法？正好看css基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小... amuqiao 2019-08-29 17:00 評論0 收藏0 垂直水平居中方法小結摘要：前言最近看到很多面試題目會問請說出幾種使用完成垂直水平居中的方法正好看基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小結。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實現垂直居中，再使用來實現水平居中。前言：最近看到很多面試題目會問：請說出幾種使用css完成垂直水平居中的方法？正好看css基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小... xcc3641 2019-08-02 11:44 評論0 收藏0 小結——居中問題的解決摘要：居中問題居中問題定位不管用水平居中需要做如下處理定位不管用，水平居中需要做如下處理定位管用水平居中需要做如下處理定位管用，水平居中需要做如下處理定位加元素已知寬度定位加元素已知寬度父元素設置為子元素設置為距上，據左，然后減去元素自居中問題： 1.Fixed定位margin：0 auto;不管用，水平居中需要做如下處理： position: fixed; top: 0; bottom: 0; ... darkbaby123 2019-04-23 11:56 評論0 收藏0 CSS學習筆記－元素水平垂直居中摘要：前言布局中經常會遇到元素水平居中的需求今天根據以前的學習筆記以及看過的一些技術博客做個元素水平居中的小結。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。前言布局中經常會遇到元素水平居中的需求,今天根據以前的學習筆記?以及看過的一些技術博客做個元素水平居中的小結。正文圖片的水平垂直居中 //圖片地址為http://static.jsbin.com/ima... NeverSayNever 2019-08-28 18:28 評論0 收藏0 CSS 行內布局實踐小結摘要：相關內聯格式上下文主要影響內布局的行盒模型，這是一個顯示區域，根據塊狀容器內，每一行的多個內聯元素都會共同生成一個行盒模型。前言通常情況下，要使元素排列在一行內，通常做法就是使用float，然后再清浮動。如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，則必須手動調整，藍色或者綠色塊的位置，比較繁瑣。 ... Taste 2019-08-28 18:13 評論0 收藏0 發表評論登陸后可評論 0條評論 xuxueli 男\|高級講師我要關注我要私信 TA的文章閱讀更多 tensorflow 閱讀 1273·2023-04-25 23:22 tensorflow配置閱讀 1673·2023-04-25 20:04 web前端和后端的區別在哪？閱讀 2648·2021-11-22 15:24 Linux——Ubuntu使用個給力的鏡像，安裝軟件速度飛快閱讀 2806·2021-11-11 16:54 自己動手寫一個側導航欄組件閱讀 1887·2019-08-30 14:03 水平垂直居中小結閱讀 1485·2019-08-29 16:35 多享開發微商城有哪些步驟？閱讀 1706·2019-08-26 10:29 前端解決第三方圖片防盜鏈的辦法 - html referrer 訪問圖片資源403問題閱讀 2661·2019-08-23 18:01 最新活動閱讀需要支付1元查看 UCloud （優刻得科技股份有限公司）是中立、安全的云計算服務平臺，堅持中立，不涉足客戶業務領域。公司自主研發IaaS、PaaS、大數據流通平臺、AI服務平臺等一系列云計算產品，并深入了解互聯網、傳統企業在不同場景下的業務需求，提供公有云、混合云、私有云、專有云在內的綜合性行業解決方案。 UCloud與云服務公司介紹加入我們 UCan線上公開課行業解決方案產品動態友情鏈接 GPU算力平臺 UCloud私有云 SurferCloud 工廠仿真軟件 Pinex AI繪畫社區欄目專欄文章專題地圖常見問題安全中心新聞動態媒體動態客戶案例公告掃掃了解更多 Copyright ? 2012-2023 UCloud 優刻得科技股份有限公司｜滬公網安備 31011002000058號｜滬ICP備12020087號-3｜感谢您访问我们的网站，您可能还对以下资源感兴趣：国产xxxx99真实实拍国产黄色在线

和

）
????vertical-align: middle;
??}

??3.使用絕對定位和負外邊距

??使用絕對定位實現垂直居中時，元素的margin-top應該等于對應的top值的一半再取負值。
??#parent {position: relative;}
??#child {
????height: 30%;
????width: 50%;
????position: absolute;
????top: 50%;
????margin: -15% 0 0 0;
??}

??4.相等的上下padding值

??#parent {
????padding: 5% 0;
??}
??#child {
????padding: 10% 0;
??}

三、水平垂直居中

??1.絕對定位和負外邊距

??使用絕對定位實現水平垂直居中時，元素的margin-top和margin-left應該等于對應的top和left值的一半再取負值。
??#parent {position: relative;}
??#child {
????position: absolute;
????top: 50%;
????left: 50%;
????height: 30%;
????width: 50%;
????margin: -15% 0 0 -25%;
??}

??2.定位和transform

??transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。2D 轉換方法，通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 坐標）和 top（y 坐標）位置參數，默認以元素的中心點為基點，x,y如果為負就反方向移動。這種方法類似于上一種使用負邊距。
??#parent {position: relative;}
??#child {
????position: fixed;//相對定位或絕對定位均可
????width:500px;
????height:300px;
????top: 50%;
????left: 50%;
????transform: translate(-50%, -50%);
??}

??3.絕對定位和margin:auto

??#parent {position: relative;}
??#child {
????width: 50%;
????height: 30%;
????position: absolute;
????top: 0;
????bottom: 0;
????left: 0;
????right: 0;
????margin: auto;
}

??4.flex布局
??div{
????display: flex;
????justify-content:center;
????align-items:Center;
??}

??能實現居中效果的方法還有很多，這里列出來的方法只是一小部分，日后會慢慢補充。

參考文章1：https://www.cnblogs.com/hutuz...
參考文章2：https://blog.csdn.net/liufeif...

GPU云服務器云服務器水平垂直居中垂直居中實現垂直居中文字垂直居中

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

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

垂直水平居中方法小結

摘要：前言最近看到很多面試題目會問請說出幾種使用完成垂直水平居中的方法正好看基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小結。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實現垂直居中，再使用來實現水平居中。前言：最近看到很多面試題目會問：請說出幾種使用css完成垂直水平居中的方法？正好看css基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小...

amuqiao 2019-08-29 17:00 評論0 收藏0
垂直水平居中方法小結

摘要：前言最近看到很多面試題目會問請說出幾種使用完成垂直水平居中的方法正好看基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小結。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實現垂直居中，再使用來實現水平居中。前言：最近看到很多面試題目會問：請說出幾種使用css完成垂直水平居中的方法？正好看css基礎的時候看到一篇文章是講完全居中的，這邊對于文章中的內容做個小...

xcc3641 2019-08-02 11:44 評論0 收藏0
小結——居中問題的解決

摘要：居中問題居中問題定位不管用水平居中需要做如下處理定位不管用，水平居中需要做如下處理定位管用水平居中需要做如下處理定位管用，水平居中需要做如下處理定位加元素已知寬度定位加元素已知寬度父元素設置為子元素設置為距上，據左，然后減去元素自居中問題： 1.Fixed定位margin：0 auto;不管用，水平居中需要做如下處理： position: fixed; top: 0; bottom: 0; ...

darkbaby123 2019-04-23 11:56 評論0 收藏0
CSS學習筆記－元素水平垂直居中

摘要：前言布局中經常會遇到元素水平居中的需求今天根據以前的學習筆記以及看過的一些技術博客做個元素水平居中的小結。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。前言布局中經常會遇到元素水平居中的需求,今天根據以前的學習筆記?以及看過的一些技術博客做個元素水平居中的小結。正文圖片的水平垂直居中 //圖片地址為http://static.jsbin.com/ima...

NeverSayNever 2019-08-28 18:28 評論0 收藏0
CSS 行內布局實踐小結

摘要：相關內聯格式上下文主要影響內布局的行盒模型，這是一個顯示區域，根據塊狀容器內，每一行的多個內聯元素都會共同生成一個行盒模型。前言通常情況下，要使元素排列在一行內，通常做法就是使用float，然后再清浮動。如下：showImg(https://segmentfault.com/img/bVmVua); 但是如果要使其垂直居中，則必須手動調整，藍色或者綠色塊的位置，比較繁瑣。 ...

Taste 2019-08-28 18:13 評論0 收藏0