> 웹 프론트엔드 > HTML 튜토리얼 > Css实现垂直水平居中的六种方法_html/css_WEB-ITnose

Css实现垂直水平居中的六种方法_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:43:07
원래의
1332명이 탐색했습니다.

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

 

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

 

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

 

	.common{		width: 600px;height: 180px;		background-color:#56abe4;		color: #fff;		margin: 15px auto; 		border-radius: 3px;	   }	.con{		display: inline-block;		padding: 15px;		width: 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-width:100%;max-height:100%;}	.block6 span{width:0;height:100%;}
로그인 후 복사

 

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

 

以上。

 

欢迎补充~

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿