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;
        }

更详细的方法教学