css学习之居中定位

定位分以下几种情况：

• 块级元素水平垂直居中

块级元素水平垂直居中又可以分为元素是否脱离文档流。

• 脱离文档流（3种）

脱离文档流，一般使用的子绝父相（需要居中定位的子元素绝对定位，父元素相对定位）。共有三种方法

1、top、left、bottom、right设为0，然后margin:auto。

		.son1{
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			left:0;
			top:0;
			right:0;
			bottom:0;
			margin:auto;
		}

2、知道自身宽高，使用top、left配合margin-top、margin-left负值。（注意：margin-left和margin-top值为元素自身宽高一半） ！！！！margin使用百分比都是相对父元素的width来计算的。

		 .son1{
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			top:50%;
			left:50%;
			margin-top:-50px;
			margin-left:-50px;

		}

3、不知自身宽高，使用css3的新特性translate。

		.son1{
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);

		}

 

• 不脱离文档流（2种）

不脱离文档流：需要子元素设置相对定位，水平居中一般利用的是margin:0 auto，垂直居中靠top和margin-top配合。

1、知道自身高height。

		.son1 {
			width: 100px;
			height: 100px;
			background-color: purple;
			margin:0 auto;
			top:50%;
			position:relative;
			margin-top:-50px;
		} 

2、不知道自身高height，使用css3新特性translate。

		.son1{
			position: relative;
			width: 100px;
			height: 100px;
			background-color: purple;
			top:50%;
			margin:0 auto;
			transform: translate(0,-50%);

		}

注意点：top生效的条件是元素定位为非static

• 行内元素水平垂直居中

	

		这是行内元素
	

• 块级元素内的行内元素水平垂直居中对齐。

1、父元素设置line-height和height相等，保证垂直居中；父元素设置text-align:center，保证水平居中。（推荐）

		.father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			position:relative;
			line-height: 300px;
			text-align: center;
		}

2、设置为行内块元素，即display:inline-block。

		.line{
			display: inline-block;
			position:relative;
			top:50%;
			tansform:translate(0,-50%); /*知道高度也可以使用负外边距，margin-top。*/
		}

		.father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			text-align:center;
		}

第二种方法同样需要在父元素中设置text-align:center;

注意：margin:0 auto;  并不会使得行内块元素水平居中。

• 弹性盒子水平垂直居中

该方法对块级元素和行内元素都有效。

1、父元素设置display:flex定义为弹性容器。通过使用justify-content和align-items。(通用)

		.father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			display: flex;
			justify-content:center;  /*水平居中*/
			align-items: center;    /*垂直居中*/

		}

2、父元素设置display:flex定义为弹性容器，子元素外边距为auto。（不适用行内元素）

		.father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			display: flex;

		}
		.son1{

			width: 100px;
			height: 100px;
			background-color: purple;
			margin:auto;
		}