純CSS實現垂直居中的幾種方法

sourcenode 發布于2019-08-23 16:41 / 1507人閱讀

摘要：垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，端實現垂直居中的方法一般是通過絕對定位，，負邊距等方法。有了，針對移動端的垂直居中就更加多樣化。方法這實際上是方法的變形，移位是通過來實現的。

垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。

方法1：table-cell

html結構：


        垂直居中

css：

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

方法2：display:flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

方法3：絕對定位和負邊距

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

方法4：絕對定位和0

.box4 span{
  width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

這種方法跟上面的有些類似，但是這里是通過margin:auto和top,left,right,bottom都設置為0實現居中，很神奇吧。不過這里得確定內部元素的高度，可以用百分比，比較適合移動端。

方法5：translate

.box6 span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }

這實際上是方法3的變形，移位是通過translate來實現的。

GPU云服務器云服務器實現垂直居中 js緩存的幾種方法最基本的幾種 html的幾種輪播

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

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

純CSS實現垂直居中的幾種方法

摘要：垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，端實現垂直居中的方法一般是通過絕對定位，，負邊距等方法。有了，針對移動端的垂直居中就更加多樣化。方法這實際上是方法的變形，移位是通過來實現的。垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。方...

FullStackDeveloper 2019-08-30 15:43 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
使一個div垂直+水平居中的幾種方法

摘要：前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設外層相對定位，內前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

joyqi 2019-08-29 11:04 評論0 收藏0
css實現水平垂直居中

摘要：純實現水平垂直居中最近的幾場面試都問了這個問題，自己也只答了種，感覺面試官不滿意，特地總結了幾種在開發中比較實用的方法，與大家分享。本文如有錯誤，請在評論區提出。純CSS實現水平垂直居中最近的幾場面試都問了這個問題，自己也只答了2種，感覺面試官不滿意，特地總結了幾種在開發中比較實用的方法，與大家分享。一、需要知道width,height的方案 1.絕對定位 + 負外邊距 ...

haoguo 2019-08-29 18:36 評論0 收藏0
css實現垂直居中的幾種方式

摘要：單行文本使用我是垂直居中文本使用我是垂直居中文本父元素子元素高度確定高度確定將設置為本元素高度的一半父元素子元素高度不確定我會絕對居中額外元素與上兩個原理一樣多設置了一個額外元素，使額外元素的為為元素的高度的負一半使用 1.單行文本使用line-height 我是垂直居中文本 //css child{ line-height: 100px; } 2.使用table-cell...

187J3X1 2019-08-30 13:09 評論0 收藏0