CSS居中初探

刚刚度过了实习期,进入了试用期。试用期依然会安排学习的任务。在学习中发现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;

原文地址:https://www.cnblogs.com/cherryblossom/p/4652160.html