谈一谈我遇到的居中问题

一，div的水平居中（安全区）

给div一个宽度，然后左右外边距为 auto

width:1000px;
margin:0 auto;

二，文本的居中

垂直居中:

height:30px;
line-height:30px;

水平居中：text-align:center;

文字在图片的中间，把此元素放置在父元素的中部:

vertical-align:middle;

此方法也可以去掉图片向下撑大的3px,因为图片的vertical-align的默认值为baseline。

注意，目前只有图片支持vertical-align这个属性，别的都不支持。

三，不固定宽高的水平垂直居中

1. 方法一

<img src="img.jpg" /><span></span>

.nav img{
	vertical-align:middle;
	}

.nav span{
	display:inline-block;
	vertical-align:middle;
	height:100%;
	width:0;

	}

2. 方法二

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

3.方法三

div{
	position: relative; 
}
img{
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	margin: auto;
}

4.方法四

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

5.方法五

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

四，固定宽高的水平垂直居中

1. 方法一

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

2. 方法二

img{
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	margin: auto;
}

3. 方法三

p{
	width: 200px;
	height: 100px;
	background: #ff0;  
	position: absolute; 
	top: 50%;  
	left: 50%; 
	margin-top: -50px; 
	margin-left: -100px; 		  
}

4. 方法四

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