元素居中

 一、元素的垂直居中

1.实现块元素的垂直居中:使用position以及负margin技术来实现

语法:

.father{
	position: relative;
}

.son{
	position: absolute;
	top: 50%;
	left:50%;
	margin-top: "height值一半的负值";
	margin-left: "width值一半的负值";
}

 说明:position这种方法是万能的,也就是不仅可以用于块元素,也可以用于inline元素和inline-块元素。

2.实现图片垂直居中于元素:使用display:table-cell和vertical-align:center来实现大小不固定的图片的垂直居中效果

语法:

.father{
	display: table-cell;
	vertical-align: center;
}

.son{                            /*img*/
	vertical-align: center;
}

 说明:图片的水平居中可以使用text-align:center(只对块元素不起作用,但img元素属于inline-block元素)来实现,通过上述方法可以实现图片在块元素内居中。

3.实现单行文字的垂直居中:定义height和line-height两个属性的值相等

二、元素的水平居中:使用外边距

语法:margin:0 auto;

说明:使用这种方法必须确定元素有定义width.

原文地址:https://www.cnblogs.com/runhua/p/6417857.html