刚刚度过了实习期,进入了试用期。试用期依然会安排学习的任务。在学习中发现css的居中十分常用,做一个小小的探索。
一、水平居中
1.行内元素
可以直接使用text-align:center来解决。例如图片和文字等。
2.块级元素
2.1宽度确定的块级元素,使用margin-left:auto;和margin-right:auto;
2.2宽度不确定的块级元素:
a.用table包裹,再对table使用text-align:center。
b.将元素设置为display:inline,然后在使用textalign:center.
c.将父元素设置float:left;position:relative;left:50%;
将子元素设置float:left;position:relative;left:-50%;
二、竖直居中
1.父元素高度不确定的文本、图片、块级元素:设置相等的上下边距。
2.父元素高度确定的单行文本:line-height设置为父元素的高度。
3.父元素高度确定的多行文本、图片、块级元素:
a.用table嵌套,使用vertical-align:middle;
b.设置display:table-cell;vertical-align:middle;