CSS幾種常用水準垂直居中的方法

CSS幾種常用居中的方法

示例代碼前提：HTML部分代碼如下

<div class="wrap block">
		     <div class="block-center">塊兒居中</div>
	     </div>       

             <div class="wrap inline">
		    <span class="inline-center">内聯居中</span>
	     </div>
           

一、絕對定位有關方法（水準垂直居中）

    方法（一）：拔河效應(*元素寬高需要設定)

.block{
			position:relative;
		}

                .block-center{
			position:absolute;
			margin:auto; /*這句要寫，否則無效果*/
			left:0;
			top:0;
			right:0;
			bottom:0;
		}
           

    方法（二）：利用margin-top和margin-left(*元素寬高需要設定)

.block-center{
			position:absolute;
			top:50%;
			margin-top:-10px;
			left:50%;
			margin-left:-50px;
		}
           

     方法（三）：利用CSS3 translate特性(但元素寬高無需設定) ，道理與第二種方法相同，注意相容性

.block-center{
			position:absolute;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
		}
           

 二、放置表格方法（水準垂直居中）

      *在子元素沒有設定寬高度和數量時使用

      注意：table-cell不感覺margin，在父元素上設定table-row等屬性，也會使其不感覺height。

.block{
			display:table;
		}
		.block-center{
			text-align:center;
			vertical-align:middle; /*實作垂直居中*/
			display:table-cell;
		}
           

 三、内聯元素居中

  （一）垂直居中

        方法①：父容器height與line-height相等

.inline{
			   text-align:center;
			   height:80px;
			   line-height:80px;
		     }
           

        方法②：給 inline 或 table-cell 元素設定vertical-align:center; (父元素要有line-heignt值)

<p style="line-height:200px">
                         <img src="smile.jpg" style="vertical-align:middle"/>
                     </p>
           

 （二）水準居中

       給父容器設定 text-align:center;

注意：  ① { margin: 0 auto; } 可以讓有寬度屬性的塊級元素水準居中。

                 但它通常隻對靜态元素（無浮動、無定位）起作用。

              ② 當給元素設定了float屬性或absolute屬性後，元素已經自動變為塊級元素了。

              ③ vertical-align的百分比值是按照line-height來計算的

四、基于Flexbox的解決方案（水準垂直居中）

        ① 塊元素和浮動元素

.block{
            display: flex;
            min-height:50vh;
        }
.block-center{
            margin:auto;
        }
           

      ② 行内元素（隻需要給最外層父元素添加即可）

.inline{
            display: flex;
            min-height:50vh;
            align-items: center;
            justify-content: center;
        }
           

更詳細的方法教學