水平垂直居中小結

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

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

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

一、水平居中

??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://www.hztianpu.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