水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中…….幫你搞定

yq前端發表於2018-05-30

2018.05.29

居中一個元素？你會想到啥？這裡面的知識還真不少。包括水平居中，垂直居中，還有水平垂直居中。
如果要再要細分，還要分浮動元素、絕對定位的居中。

為了程式碼簡介，沒有加背景和其他樣式，需要看效果的，可以加上背景。

目錄：

  • 第一部分：水平居中

    • 1、常規元素的水平居中

      • 行內元素、不定寬塊級元素：text-align
      • 圖片的水平居中 ：clear + display + margin
      • 定寬塊級元素：margin:0 auto;
      • 通用方法(不管行還是塊元素，通殺)：flex

    • 2、浮動元素的水平居中

      • 定寬元素：relative + margin-left + left
      • 不定寬元素：父float + 父relative + 子relative
      • 通用(不管是定寬還是不定寬，通殺)：flex

    • 3、絕對定位元素的水平居中

      • 定寬的元素：relative + left + …
      • 不定寬的元素：relative + left + translateX
      • 通用方式：不管是否寬度，通殺 flex
    • 4、總結：水平居中的通用方式(包含常規元素、浮動、絕對定位)：flex

  • 第二部分：垂直居中

    • 1、常規元素的垂直居中

      • 行內文字元素：line-height
      • 通用(不管行級,塊級元素,圖片,都通殺)tabel-cell + vertical-align 或 flex

    • 2、浮動元素的垂直居中

      • 定高的元素：(relative + absolute + line-height) + top/bottom或margin-top
      • 通用方式： flex

    • 3、絕對定位元素的垂直居中

      • 利用絕對定位自身來垂直居中：translateY
      • 通用：flex
    • 4、總結：垂直居中的通用方式(包含常規元素、浮動、絕對定位)：flex

  • 第三部分：水平垂直居中

    • 1、常規元素的水平垂直居中

      • 通用(一列或多列)：(table-cell + vertical-align + text-align) 或 flex

    • 2、浮動元素的水平垂直居中

      • 通用(一個或多列元素)：flex

    • 3、絕對定位元素的水平垂直居中

      • 利用絕對定位來水平垂直居中：relative + translate
      • 通用：flex
    • 4、總結：水平垂直居中的通用方式(包含常規元素、浮動、絕對定位)：flex

第一部分：水平居中

1、常規元素的水平居中

  • 行內元素、不定寬塊級元素：text-align

注意：將div#inner 換成 span#inner 效果一樣。

樣式：
#outer {text-align:center}

<div id=`outer`>
   <div id=`inner`>水平居中的元素</div>
</div>
  • 圖片的水平居中 ：clear + display + margin

圖片的居中，比較特殊。

img {   // 設定這三個屬性，就可以居中
    clear: both;
    display: block;
    margin:auto;
}
<div id=`outer`>
   <img src="on1.png" >水平居中的元素</div>
</div>
  • 定寬塊級元素：margin:0 auto;

注意：樣式是在inner元素中新增

樣式：
#inner {width:200px;margin:0 auto;}

<div id=`outer`>
   <div id=`inner`>水平居中的元素</div>
</div>
  • 通用方法(不管行還是塊元素，通殺)：flex
#outer {
   display:flex;
   justify-content:center;
}

<div id=`outer`>
   <div id=`inner`>水平居中的元素</div>
</div>

2、浮動元素的水平居中

由於元素浮動之後，其本身就相當於設定了display:inline-block;也就是可以設定寬和高了。
所以浮動元素，沒有行級和塊之分，都是塊級或inline-block的元素；只有定寬和不定寬之分
參考：浮動與寬高

  • 定寬元素：relative + margin-left + left

注意：樣式設定在浮動元素本身

樣式：
#inner-float {
   position:relative;
   left:50%;
   margin-left:-100px;
}

<div id="outer">
  <span id="inner-float" style="float: left;width: 200px;">我是要居中的浮動元素</span>
</div>
  • 不定寬元素：父float + 父relative + 子relative

注意：要清除浮動，給外部元素加上float。這裡的父元素就是外部元素

#outer {
    float:left;
    position:relative;
    left:50%;
}
#inner-float {
    position:relative;
    left:-50%; 或 right:50%
}

<div id="outer">
  <span id="inner-float" style="float: left;">我是要居中的浮動元素</span>
</div>
  • 通用(不管是定寬還是不定寬，通殺)：flex
#outer {
    display:flex;
    justify-content:center;
}

<div id="outer">
  <span id="inner-float" style="float: left;width: 200px;">我是要居中的浮動元素</span>
</div>

3、絕對定位元素的水平居中

由於元素絕對定位之後，其本身就相當於設定了display:inline-block;也就是可以設定寬和高了。
所以絕對定位元素，沒有行級和塊之分，都是塊級或inline-block的元素；只有定寬和不定寬之分
參考連結：絕對定位與寬度

  • 定寬的元素：relative + left + …
// 寫法一：
#outer {
    position: relative;
}
#inner-absolute {
    left:50%;
    margin-left:-100px;
}
    
// 寫法二：
#outer {
    position: relative;
}
#inner-absolute {
    left:0;
    right:0;
    margin:0 auto;
}

<div id="outer">
  <span id="inner-absolute" style="position: absolute;width: 200px;">我是要居中的浮動元素</span>
</div>
  • 不定寬的元素：relative + left + translateX
#outer {
    position: relative;
}
#inner-absolute {
    left:50%;
    transform:translateX(-50%); // translateX是相對自身來計算的。
}

<div id="outer">
  <span id="inner-absolute" style="position: absolute;">我是要居中的浮動元素</span>
</div>
  • 通用方式：不管是否寬度，通殺 flex
#outer {
    display:flex;
    justify-content:center;
}

<div id="outer">
  <span id="inner-absolute" style="position: absolute;">我是要居中的浮動元素</span>
</div>

4、總結：水平居中的通用方式(包含常規元素、浮動、絕對定位)：flex

#outer {
    display:flex;
    justify-content:center;
}

<div id="outer">
  <span id="inner-absolute">我是要居中的常規、浮動、絕對定位元素，此辦法都適用</span>
</div>

第二部分：垂直居中

垂直居中，預設外部元素(這裡稱為父元素)是有高度的

常規元素的垂直居中

  • 行內文字元素：line-height
   #inner {
      line-height:40px;
    }
    
<div id="outer" style="height:40px;">
  <span id="inner">我是要居中的浮動元素</span>
</div>
  • 通用(不管行級,塊級元素,圖片,都通殺)tabel-cell + vertical-align 或 flex
方式一：diaplay:tabel-cell; vertical-align
#outer {
    display: table-cell;
    vertical-align: middle;
}

方式二：flex + align-item
#outer {
    display:flex;
    align-items:center;
}

<div id="outer" style="height:200px;">
  <span id="inner">我是垂直居中的元素</span>
</div>

注意：#outer{height:100px;display:table} #inner{display:table-cell;vertical-align: middle;} 也可以達到垂直居中，但是不通用。

2、浮動元素的垂直居中

  • 定高的元素：(relative + absolute + line-height) + top/bottom或margin-top
方式一：relative + absolute + line-height + top/bottom
   #outer {
      position: relative;
    }
    #inner {
      line-height:100px;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
    }

方式二：relative + absolute + line-height + margin-top
#outer {
      position: relative;
}
#inner {
      line-height:100px;
      position: absolute;
      top: 50%;
      margin-top:-50px
}

<div id="outer" style="height:200px;">
  <div id="inner" style="float: left;height: 100px;">我是垂直居中的元素</div>
</div>
  • 通用： flex
#outer {
    display:flex;
    align-items:center;
}

<div id="outer" style="height:200px;">
  <div id="inner">我是垂直居中的元素</div>
</div>

3、絕對定位的垂直居中

絕對定位元素相當於inline-block：沒有行和塊之分，只有定高和不定高之分。

  • 利用絕對定位自身來垂直居中：translateY
#outer {
    position: relative;
}
#inner {
    top:50%;
    transform: translateY(-50%); // 相對自身向上移動
}
  
<div id="outer" style="height:200px;">
  <div id="inner" style="position: absolute;">我是垂直居中的元素</div>
</div>
  • 通用： flex
 #outer {
    display: flex; 
    align-items: center;
}
#inner {
    line-height:100px;
}

<div id="outer" style="height:200px;">
  <div id="inner" style="position: absolute;">我是垂直居中的元素</div>
</div>

4、總結：垂直居中的通用方式(包含常規元素、浮動、絕對定位)：flex

#outer {
    display: flex; 
    align-items: center;
}
#inner {
    line-height:100px;
}

<div id="outer" style="height:200px;">
  <div id="inner" style="position: absolute;">我是垂直居中的常規、浮動、絕對定位元素</div>
</div>

第三部分：水平垂直居中

1、常規元素的水平垂直居中

  • 通用(一列或多列)：(table-cell + vertical-align + text-align) 或 flex
方式1一：table-cell + vertical-align + text-align 
#outer {
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#inner {
    display:inline-block; // 適合多列
}
  • 通用：flex // 見下方

2、浮動元素的水平垂直居中

子元素可以設定 mairgin 以及word-wrap:break-word; 方便效果

  • 通用(一個或多列元素)：flex // 見下方

3、絕對定位元素的水平垂直居中

  • 利用絕對定位來水平垂直居中：relative + translate
 #outer {
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    position: relative;
}
#inner {
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

<div id="outer" >
  <div id="inner" style="position: absolute;">我是水平垂直居中的元素</div>
</div>
  • 通用：flex ：見下方

4、總結：水平垂直居中的通用方式(包含常規元素、浮動、絕對定位)：flex

#outer{
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    display:flex;
    justify-content:center;
    aligns-item:center;
}
#inner {
    display:inline-block; // 適合多列
}

<div id="outer" >
 <div id="inner" >我是水平垂直居中的常規、浮動、絕對定位元素</div>
</div>

相關文章