css 元素居中

AZmake 發布于2019-08-29 17:16 / 674人閱讀

摘要：一水平居中行內元素水平居中在父元素上設置使文字圖片水平居中。結果如圖塊級元素的寬高不固定，就不能用負了使用百分比是相對于父元素的寬度。代碼結果實現代碼設置寬高以顯示居中效果彈性布局垂直居中水平居中

一：水平居中 1、行內元素水平居中

在父元素上設置 text-align: center 使文字/圖片水平居中。

.container {
  text-align: center;
}

2、塊級元素水平居中

先給塊級元素設置寬度（不設置寬度，塊級元素自己占據一整行，何談居中）

再給塊級元素設置margin：0 auto;（當上下margin不一定是0，可以按照需求來設置）

.container {
  width: 200px;
  margin:  0 auto;
}

二、垂直居中 1、塊級元素內部垂直居中

原理：設置塊級元素上下padding相等

前提：沒有設置高度，高度由內容撐開。塊級元素如果設置了高度，就不知道如何設置padding的數值
demo


 
    好好學習
    天天向上

執行結果

2、絕對定位實現垂直居中

（1）demo，
使用前提是塊級元素的寬高固定


    我是標題
    我是內容

（2）解析：
使用絕對定位 position: absolute，讓dialog起點偏移到頁面的中央

通過負margin，偏移dialog寬高的一半，讓dialog處于正中。不用relative的原因是已經用了絕對定位了，所以只好用負margin。結果如圖

（3）塊級元素的寬高不固定，就不能用負margin了（margin使用百分比是相對于父元素的寬度）。我們可以用css3的一個transform的屬性，transform是相對自身的寬高來做偏移的。

3、vertical-align實現水平垂直居中

原理：

通過text-align:center 實現水平居中

通過偽元素設置一個內容為空的元素，設置高度為100%，通過vertical-align實現基線對齊。

使用環境：塊級元素中設置行內元素水平垂直居中
代碼：demo
結果：

遇坑：1、當然使用絕對定位也可以實現這個效果

2、偽元素設置display：block是有問題，需要設置為inline-block

3、使用偽元素是為了減少標簽

4、table-cell實現居中

原理：把box設置為表格元素（display: table-cell），通過vertical-align: middle對里面的元素做垂直居中
缺點：把box設置為display: table-cell，box不再是塊級元素，如果不設置寬度就會收縮。

代碼：demo
結果：

5、display: flex實現

代碼：demo


  

.space {
  width: 100vw;
  height: 100vh;  /* 設置寬高以顯示居中效果 */
  display: flex;  /* 彈性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

body {
  margin: 0;
  background: rgba(0, 0, 0, .95);
}

.earth::after {
  content: "

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

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

CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 評論0 收藏0
css-元素居中

摘要：一水平居中行內元素水平居中使用屬性可以實現在行內元素包括在塊級父元素水平居中。使用負已知高度寬度使用使用使用三水平垂直居中公共結構塊級元素垂直居中。本文重要是匯總了關于水平居中，垂直居中，還有水平垂直居中的各種方法。一、水平居中 1.行內元素水平居中使用text-align:center;屬性可以實現在行內元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 評論0 收藏0
【基礎】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內聯元素水平居中利用可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素內聯塊內聯表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內聯元素垂直居中通過設置內聯元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0