关于元素的居中方式和水平垂直居中小结

关于元素的居中方式和水平垂直居中

1 .块元素的水平居中：margin：0 auto；

		块元素比较常见的是一个网页大的模块版心的居中用的较多：
		margin： o auto   只能用于水平居中，垂直方向无法做到

2. 行内元素的水平居中和垂直居中

    水平居中：text-align：center
    垂直居中把行高设置为父元素的行高就可以了 ，但只适用于只有一行文本
    line-height：父元素高度
   

3.margin和 width实现居中
通常用于浮动的元素 因为脱离的文档流 通过调整margin来实现居中
方法比较麻烦

3. 关于定位元素的水平垂直居中 这也是一道常见的面试题

    第一种方法：
    父元素尺寸未知、子元素尺寸已知,元素尺寸大小不受限
    父{
    position: relative;
    }
    子{
    width: 200px;
    height: 100px;
    background: red;
    position: absolute;
    top: 50%; 向下移动父元素高度的一半
    left: 50%; 向右移动父元素宽度的一半
    margin-top:-50px; 子元素向上移动自己高度的一半
    margin-left:-100px; 子元素向左移动自己宽度的一半
    }
    这里也可以用 calc（）来写更好一点 例如：
    left： 50% - 自身元素宽度 / 2
    top ； 50% - 自身元素高度 / 2
    
    第二种方法：
    父元素子元素尺寸都未知、只适用于父元素尺寸比子元素尺寸大
    父{
    position: relative;
    }
    子{
    width: 100px;
    height: 400px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }
   

3.哪些值可以取负值呢？

	top 
	bottom
	left
	right
	margin
	text-indent                   缩进可以取负值
	background-position    背景图片的位置
	z-index							定位元素的叠加