关于元素的居中方式和水平垂直居中
1 .块元素的水平居中:margin:0 auto;
块元素比较常见的是一个网页大的模块版心的居中用的较多:
margin: o auto 只能用于水平居中,垂直方向无法做到
-
行内元素的水平居中和垂直居中
水平居中:text-align:center 垂直居中把行高设置为父元素的行高就可以了 ,但只适用于只有一行文本 line-height:父元素高度
3.margin和 width实现居中
通常用于浮动的元素 因为脱离的文档流 通过调整margin来实现居中
方法比较麻烦
-
关于定位元素的水平垂直居中 这也是一道常见的面试题
第一种方法: 父元素尺寸未知、子元素尺寸已知,元素尺寸大小不受限 父{ 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 定位元素的叠加