首先,要先明白元素的‘高度’
如果对象是一个块级元素或者置换元素,那么它的高度就是设置height。
如果对象是一个内联元素(不可置换的),那么除了设置display,float等等,它的‘高度’,一般使用line-height(行间距),font-size,vertical-align来设置。
ps:什么是可置换元素。W3C里面是这么说的
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
也就是说,置换元素主要是:img,input,textarea,select,object等等这类默认就有css团格式化外表范围的元素、
接下来总结下元素垂直居中问题。
- 我用的比较多的一个方法是,将父元素的行高和高度设置为一样。(height: 元素的高度,line-height: 行间距,指在文本中,行与行之间的 基线间的距离 )。
不过这种方法的前提是:单行元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#div0{
background-color: red;
height: 100px;
line-height: 100px;
}
</style>
<body>
<div id="div0">
父元素的行高和高度设置为一样
</div>
</body>
</html>
这里设置line-height:100px,也就是说行间距为100px,那么它会在一行的上面距离有50px,下面距离也有50px,然后如果有下一行,下一行的上面和上一行的下面的距离加起来就有100px,达到了100px行间距(行高)的效果.
2. 对于多行的元素。(1)可以用定位的方法,这里就不说明了。(2)可以用vertical-align,不过要注意的是,只有一个元素属于inline或inline-block(table-cell也可以理解为inline-block水平)水平,它的vertical-align属性才会起作用。这里要考虑兼容性问题。。。。。另外,这里的vertical-align是指行内元素的基线相对于该元素所在行的基线的垂直对齐。一般的话,这个属性要用的话,是要有和别的相邻元素比较的的,它是相对于别的元素的垂直的对齐方式。
o(╯□╰)o感觉这个好复杂,简单的理解就是对于父元素的基线或者字体的位置的对齐方式(要考虑到字体大小)。
可以取值:
详细的可以参考: http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
和
https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
6.13补充:关于定位,如果是position要注意是元素左上角的定位,具体要实现居中,可以联合css3的translate(-50%,-50%);或者可以使用margin/padding来实现
12.6补充:也可以在要居中的元素旁边建立一个透明div,然后通过定位这个div来使目的元素定位