css-元素居中

miqt 發布于2019-08-29 18:39 / 2216人閱讀

摘要：一水平居中行內元素水平居中使用屬性可以實現在行內元素包括在塊級父元素水平居中。使用負已知高度寬度使用使用使用三水平垂直居中公共結構塊級元素垂直居中。

本文重要是匯總了關于水平居中，垂直居中，還有水平垂直居中的各種方法。

一、水平居中

1.行內元素水平居中

使用text-align:center;屬性可以實現在行內元素（包括：inline,inline-block、inline-table、inline-flex）在塊級父元素水平居中。

css樣式:

html結構：


    我是inline


    我是inline-block


     我是inline-table


     我是inline-flex

2.塊級元素水平居中

塊級元素水平居中的方法有很多，下面會一一列舉：

a.將元素的左右外邊距設置為auto。

cssy樣式：
.child{
        margin: 0 auto;
  }

b.使用absolute+transdorm

 父元素相對定位，子元素絕對定位 left:50%，然后向左移動子元素一般的寬度達到水平居中。

css樣式：

html結構：


  使用absolute+transdorm

c.使用flex+justify-content
css3的flex布局具有兼容性問題，使用需謹慎。

css樣式：

html結構：


  flex+justify-content

d.使用flex+margin
父元素設為flex布局，在設置子元素居中

css樣式：

html結構


  flex+margin

3.多個塊級元素水平居中

html結構：


    多級塊元素水平居中
    多級塊元素水平居中
    多級塊元素水平居中

公用樣式
.parent{
        border: 1px solid rosybrown;
    }
   .chlid{
       width: 50px;
       background: papayawhip;
       margin-right: 10px;
   }

css樣式1——flex布局

css樣式2-inline-block + text-align: center

4.浮動元素水平居中

公用html結構：


   需要居中的子元素

1.定寬浮動元素，通過relative+margin

css樣式：

2.不定寬，父子元素設置相對定位

css樣式：

3.利用flex布局（通用不管定寬還是不定寬）

5.絕對定位元素水平居中

 
    讓絕對定位的元素水平居中對齊。
  
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*絕對定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此處不能省略，且為0*/
         right: 0;/*此處不能省略，且為0*/
    }

二、垂直居中

1. 單行內聯元素垂直居中


     單行內聯元素垂直居中。。

2.多行內聯元素垂直居中

a.利用flex布局（flex）


    Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.

3.塊級元素垂直居中

公共html結構

    塊級元素垂直居中。

a.使用absolute+負margin(已知高度寬度)

 .parent {
   position: relative;
}
.child {
   position: absolute;  
   top: 50%;
   height: 100px;
   margin-top: -50px;
}

b.使用absolute+transform

.parent {
   position: relative;
}
.child {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

c.使用flex+align-items

.parent {
    display:flex;
    align-items:center;
}

d.使用table-cell+vertical-align

 .parent {
    display: table-cell;
    vertical-align: middle;
  }

三、水平垂直居中

公共html結構

    >塊級元素垂直居中。

方法一：絕對定位與負邊距實現（已知高度寬度）

 .parent {
   position: relative;
 }
 .child {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -50px 0 0 -50px;
 }

方法二：絕對定位與margin:auto （已知高度寬度）

.parent {
   position: relative;
   height:200px;//必須有個高度
}
.child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;//注意此處的寫法
}

方法三：絕對定位+CSS3(未知元素的高寬)

.parent {
  position: relative;
}
 .child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法四：flex布局

 .parent {
   height:200px;//必須有高度
   display: flex;
   justify-content: center;
   align-items: center;
 }

方法五：flex/grid與margin:auto

.parent {
  height:200px;//必須有高度
  display: grid;
}
.child {
  margin: auto;
}

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114482.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
【基礎】這15種CSS居中的方式，你都用過哪幾種？

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

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