純CSS實(shí)現(xiàn)垂直居中的幾種方法

FullStackDeveloper 發(fā)布于2019-08-30 15:43 / 1508人閱讀

摘要：垂直居中是布局中十分常見(jiàn)的效果之一，為實(shí)現(xiàn)良好的兼容性，端實(shí)現(xiàn)垂直居中的方法一般是通過(guò)絕對(duì)定位，，負(fù)邊距等方法。有了，針對(duì)移動(dòng)端的垂直居中就更加多樣化。方法這實(shí)際上是方法的變形，移位是通過(guò)來(lái)實(shí)現(xiàn)的。

垂直居中是布局中十分常見(jiàn)的效果之一，為實(shí)現(xiàn)良好的兼容性，PC端實(shí)現(xiàn)垂直居中的方法一般是通過(guò)絕對(duì)定位，table-cell，負(fù)邊距等方法。有了css3，針對(duì)移動(dòng)端的垂直居中就更加多樣化。

方法1：table-cell

html結(jié)構(gòu)：


        垂直居中

css：

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

方法2：display:flex

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

方法3：絕對(duì)定位和負(fù)邊距

.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：絕對(duì)定位和0

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

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

方法5：translate

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

這實(shí)際上是方法3的變形，移位是通過(guò)translate來(lái)實(shí)現(xiàn)的。

云服務(wù)器 GPU云服務(wù)器實(shí)現(xiàn)垂直居中 js緩存的幾種方法最基本的幾種 html的幾種輪播

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116063.html

相關(guān)文章

純CSS實(shí)現(xiàn)垂直居中的幾種方法

摘要：垂直居中是布局中十分常見(jiàn)的效果之一，為實(shí)現(xiàn)良好的兼容性，端實(shí)現(xiàn)垂直居中的方法一般是通過(guò)絕對(duì)定位，，負(fù)邊距等方法。有了，針對(duì)移動(dòng)端的垂直居中就更加多樣化。方法這實(shí)際上是方法的變形，移位是通過(guò)來(lái)實(shí)現(xiàn)的。垂直居中是布局中十分常見(jiàn)的效果之一，為實(shí)現(xiàn)良好的兼容性，PC端實(shí)現(xiàn)垂直居中的方法一般是通過(guò)絕對(duì)定位，table-cell，負(fù)邊距等方法。有了css3，針對(duì)移動(dòng)端的垂直居中就更加多樣化。方...

sourcenode 2019-08-23 16:41 評(píng)論0 收藏0
CSS開(kāi)發(fā)

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

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

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

joyqi 2019-08-29 11:04 評(píng)論0 收藏0
css實(shí)現(xiàn)水平垂直居中

摘要：純實(shí)現(xiàn)水平垂直居中最近的幾場(chǎng)面試都問(wèn)了這個(gè)問(wèn)題，自己也只答了種，感覺(jué)面試官不滿意，特地總結(jié)了幾種在開(kāi)發(fā)中比較實(shí)用的方法，與大家分享。本文如有錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論區(qū)提出。純CSS實(shí)現(xiàn)水平垂直居中最近的幾場(chǎng)面試都問(wèn)了這個(gè)問(wèn)題，自己也只答了2種，感覺(jué)面試官不滿意，特地總結(jié)了幾種在開(kāi)發(fā)中比較實(shí)用的方法，與大家分享。一、需要知道width,height的方案 1.絕對(duì)定位 + 負(fù)外邊距 ...

haoguo 2019-08-29 18:36 評(píng)論0 收藏0
css實(shí)現(xiàn)垂直居中的幾種方式

摘要：?jiǎn)涡形谋臼褂梦沂谴怪本又形谋臼褂梦沂谴怪本又形谋靖冈刈釉馗叨却_定高度確定將設(shè)置為本元素高度的一半父元素子元素高度不確定我會(huì)絕對(duì)居中額外元素與上兩個(gè)原理一樣多設(shè)置了一個(gè)額外元素，使額外元素的為為元素的高度的負(fù)一半使用 1.單行文本使用line-height 我是垂直居中文本 //css child{ line-height: 100px; } 2.使用table-cell...

187J3X1 2019-08-30 13:09 評(píng)論0 收藏0