CSS - 實現垂直居中的幾種方式

light 發布于2019-08-29 18:41 / 2548人閱讀

摘要：元素為未知寬高的元素和元素為為定寬定高自身包含尺寸的元素的元素絕對定位和負邊距絕對定位和原理當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性，具有流體特性絕對定位元素的的填充規則和普通流體元素一模一樣參考

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. 元素為為定寬定高（自身包含尺寸的元素）的元素
絕對定位和負邊距

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

絕對定位和0
原理：當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性，具有流體特性絕對定位元素的margin:auto的填充規則和普通流體元素一模一樣

  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...

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式實現垂直居中

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

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

css實現垂直居中的幾種方式

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

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

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

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

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

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

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

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

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

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