zoukankan      html  css  js  c++  java
  • Css实现垂直水平居中的六种方法

    经常在项目中用到,今天总结了一下:

    演示地址:http://codepen.io/anon/pen/xGdpOa

    以下两个类为公共类,便于更好的显示效果,非核心代码

    	.common{
    		 600px;height: 180px;
    		background-color:#56abe4;
    		color: #fff;
    		margin: 15px auto; 
    		border-radius: 3px;
    	   }
    
    	.con{
    		display: inline-block;
    		padding: 15px;
    		 160px;
    		height: 80px;
    		background-color: orange;
    	}
    

      

    正文部分:

    第一种方法:

    /*position: absolute;top:0;right: 0;bottom: 0;left: 0;margin: auto;*/

    HTML结构:

    <div class="common block1">
    	<div class="inner1 con">
    		position: absolute;
    		top:0;right: 0;bottom: 0;left: 0;
    		margin: auto;
    	</div>
    </div>
    

    CSS部分:

    	
    	.block1{
    		position: relative;
    	}
    
    
    	.inner1{
    		position: absolute;
    		top:0;right: 0;bottom: 0;left: 0;
    		margin: auto;
    	}
    

     

    第二种方法: 

    /*display: table-cell*/

    HTML结构:

    <div class="common block2">
       	<div class="con">
    		display: table-cell;
    		text-align: center;
    		vertical-align: middle;
    	</div>
    
    </div>
    

    CSS部分: 

    .block2{
    		display: table-cell;
    		text-align: center;
    		vertical-align: middle;
    	}
    

      

    第三种方法:

    /*display: flex;*/

    HTML结构:

    <div class="common block3">
    	<div class="con">
      display: flex;
      align-items: center;
      justify-content: center;
    	</div>
    </div>
    

    CSS部分:

    	.block3{
    		display: flex;
    		align-items: center;
    		justify-content: center;
    	}
    

      

     第四种方法:

      /*负定位*/

    HTML结构:

    <div class="common block4">
    	<div class="inner4 con">
    	   position: absolute;
    		top: 50%;
    		left: 50%;
            并利用负定位消除元素的上下,左右偏移
    	</div>
    </div>
    

    CSS部分:

    	.block4{
                   position: relative;
    	}
    
    	.inner4{
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		margin-top: -55px;/*80/2+15=55*/
                    margin-left: -95px;/*160/2+15=95*/
    	}
    

      

     第五种方法:

     /*transform*/

    HTML结构:

    <div class="common block5">
    	<div class="inner5 con">
    		position: absolute;
    		top: 50%;
    		left: 50%;
            transform:translate(-50%,-50%);
    	</div>
    </div>
    

    CSS部分:

    	.block5{
                    position: relative;
    	}
    
    	.inner5{
    		position: absolute;
    		top: 50%;
    		left: 50%;
                    transform:translate(-50%,-50%);
                    word-wrap: break-word;
    	}
    

      

    第六种方法:(兼容性较好)

    /*行内块*/

    HTML结构:

    <div class="common block6">
    	<div class="inner6 con">行内块:<br/>谨记span标签与该div之间是没有空白的,否则会产生误差</div><span></span>
    </div>
    

    CSS部分:

    	.block6{ text-align:center;}
    
    	.inner6,.block6 span{
    	 display:inline-block;
    	 *display:inline;
    	 zoom:1;    
    	 vertical-align:middle;	
    	}
    
    	.inner6{max-100%;max-height:100%;}
    
    	.block6 span{0;height:100%;}
    

    以上几种方案存在兼容性问题,在使用时请先查询核心css的浏览器兼容情况,查询地址:http://caniuse.com/

    以上。

    欢迎补充~

  • 相关阅读:
    SQL学习笔记9——SQL中检索数据之分页查询
    SQL学习笔记8——SQL中检索数据之子查询
    SQL学习笔记7——SQL中检索数据之连接查询
    Two Pointer
    LeetCode 1438. Longest Continuous Subarray With Absolute Diff Less Than or Equal to Limit
    leetcode 30 days challenge Check If a String Is a Valid Sequence from Root to Leaves Path in a Binary Tree
    LeetCode First Unique Number
    letcode1143 Longest Common Subsequence
    Leetcode 560 Subarry Sum Equals K
    leetcode Leftmost Column with at Least a One
  • 原文地址:https://www.cnblogs.com/kevinCoder/p/4561255.html
Copyright © 2011-2022 走看看