CSS - 實現(xiàn)垂直居中的幾種方式

light 發(fā)布于2019-08-29 18:41 / 2625人閱讀

摘要：元素為未知寬高的元素和元素為為定寬定高自身包含尺寸的元素的元素絕對定位和負(fù)邊距絕對定位和原理當(dāng)一個絕對定位元素，其對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候，流體特性，具有流體特性絕對定位元素的的填充規(guī)則和普通流體元素一模一樣參考

1. 元素為未知寬高的元素
flex
http://www.ruanyifeng.com/blo...

display: flex;
justify-content:center;
align-items:Center;

translate

position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;

flex和margin:auto

.box{
    display: flex;
    text-align: center;
}
.box span{margin: auto;}

2. 元素為為定寬定高（自身包含尺寸的元素）的元素
絕對定位和負(fù)邊距

position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;

絕對定位和0
原理：當(dāng)一個絕對定位元素，其對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候，流體特性，具有流體特性絕對定位元素的margin:auto的填充規(guī)則和普通流體元素一模一樣

  width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0;

參考：
https://www.cnblogs.com/hutuz...
https://www.zhangxinxu.com/wo...

云服務(wù)器 GPU云服務(wù)器 js繼承的幾種方式服務(wù)器請求的幾種方式 java創(chuàng)建對象的幾種方式實現(xiàn)垂直居中

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114497.html

相關(guān)文章

css實現(xiàn)垂直居中的幾種方式

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

187J3X1 2019-08-30 13:09 評論0 收藏0
(面試題)垂直居中的幾種實現(xiàn)方式

摘要：尤其是在實際頁面中，有很多特殊的場景，導(dǎo)致水平居中實現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例一個的在一個水平垂直居中，用實現(xiàn)。首先定義元素層和垂直居中無關(guān)的樣式直接定義在里。相比較水平居中，垂直居中比較復(fù)雜點。尤其是在實際頁面中，有很多特殊的場景，導(dǎo)致水平居中實現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例：一個200*2...

cheukyin 2019-08-30 11:18 評論0 收藏0
純CSS實現(xiàn)垂直居中的幾種方法

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

FullStackDeveloper 2019-08-30 15:43 評論0 收藏0
純CSS實現(xiàn)垂直居中的幾種方法

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

sourcenode 2019-08-23 16:41 評論0 收藏0
使一個div垂直+水平居中的幾種方法

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

joyqi 2019-08-29 11:04 評論0 收藏0