CSS水平垂直居中解決方案

Ververica 發(fā)布于2019-08-30 13:57 / 1203人閱讀

摘要：水平垂直居中解決方案準(zhǔn)備創(chuàng)建元素垂直水平居中方案一知道寬度的情況下負(fù)值垂直水平居中方案二不知道寬高的情況下垂直居中方案三垂直居中方案四多行文本的垂直居中或者垂直居中方案五垂直居中方案六偽元素在

CSS水平垂直居中解決方案 準(zhǔn)備

創(chuàng)建元素


  child

垂直水平居中方案一：知道寬度的情況下 absolute+margin負(fù)值

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  background: yellow;
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
}

垂直水平居中方案二：不知道寬高的情況下 absolute+transform

.parent {
  width:400px;
  height:400px;
  background: red;
  position: relative;
}
.child {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

垂直居中方案三：position+margin:auto

.parent {
  position:relative;
  width:200px;
  height:200px;
  background: red;
}
.child {
  width:80px;
  height:40px;
  background: yellow;
  position: absolute;
  left:0;
  top:0;
  right:0 ;
  bottom:0;
  margin:auto;
}

垂直居中方案四：+ 多行文本的垂直居中 :table-cell+vertical-align:middle;

.parent {
    height: 300px;
    width:400px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
  display: inline-block;
  width:50px;
  height:50px;
  background: blue;
}
/* 或者 */
.parent {
    width: 400px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
    text-align: center;
}
.child {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

垂直居中方案五：display: flex

.parent {
  width:400px;
  height:200px;
  background:red;
  display: flex;
  justify-content:center;
  align-items:center;
}
.child {
  height:100px;
  width:100px;
  background:green;
}

垂直居中方案六：偽元素

.parent {
  width:200px;
  height:200px;
  background:red;
  text-align: center;
}
.child {
  height:100px;
  width:100px;
  background:yellow;
  display: inline-block;
  vertical-align: middle;
}
.parent:before {
  content:"";
  height:100%;
  vertical-align: middle;
  display: inline-block;
}

在下的文章都是學(xué)習(xí)過(guò)程中的總結(jié)，如果發(fā)現(xiàn)錯(cuò)誤，歡迎留言指出~

云服務(wù)器 GPU云服務(wù)器水平垂直居中垂直居中實(shí)現(xiàn)垂直居中文字垂直居中

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

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

相關(guān)文章

【前端】這可能是你看過(guò)最全的css居中解決方案了~

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

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

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

Simon 2019-08-01 18:31 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？

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

Apollo 2019-08-30 14:15 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？

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

Scholer 2019-08-02 16:14 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？

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

mayaohua 2019-08-29 18:44 評(píng)論0 收藏0
對(duì)css居中的一點(diǎn)總結(jié)

摘要：為了更好的加深對(duì)居中的理解，搜集和閱讀相關(guān)資料，發(fā)現(xiàn)不錯(cuò)的文章將其整理出來(lái)。在學(xué)習(xí)前端的過(guò)程中，發(fā)現(xiàn)元素和文本的水平居中和垂直居中，是經(jīng)常會(huì)出現(xiàn)的問(wèn)題，在實(shí)際工作中也會(huì)經(jīng)常碰到。居中的技巧有很多，但在編寫代碼的過(guò)程中，發(fā)現(xiàn)有時(shí)候技巧管用，有時(shí)候不管用，于是就將每個(gè)知道的方案都試一遍，找到合適的。這種情況究其原因是對(duì)居中的認(rèn)識(shí)不夠深入，只是停留在實(shí)現(xiàn)需求的水平上。為了更好的加深對(duì)居中的...

BenCHou 2019-08-29 11:17 評(píng)論0 收藏0