设置水平和垂直居中有哪几种方法

  • 2017-04-16 10:27:59
  • 4,867 次阅读
  • 稿源:天马行空

在做网站布局时,很多情况下要实现元素区块的水平或垂直居中。但有时设置了居中的方法并不起作用,这可能是我们对css居中的知识没有完全掌握。css的居中有多种方式,下面就具体介绍。

1.水平居中

(1)文本、图片等行内元素的水平居中

直接给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。

(2)确定宽度的块级元素的水平居中

通过设置margin:0 auto实现水平居中

(3)不确定宽度的块级元素的水平居中

三种方式可以实现不确定宽度的块级元素水平居中

方法一:使用table标签间接实现内部元素区块的水平居中

非常有趣的是table本身并不是块级元素,如果不设置宽度,它的宽度就由内部元素决定,只要给table设置margin:0 auto就可以实现水平居中,从而间接达到内部元素的水平居中。但这种方法缺点是增加了无语义标签,加深了标签的嵌套层数。

方法二:转化块级元素的类型

通过使用display将block类型的元素转化为inline类型的元素,然后使用text-align来实现水平居中。与方法一相比,它的好处是不用增加无语义标签,简化了标签的嵌套层次。但转化后的行内元素比块级元素缺少了某些功能,比如长宽值设置无效。

方法三:利用浮动和相对定位来实现水平居中

首先给父元素设置float并设置position:relative和left:50%,然后给子元素设置position:relative和left:-50%来实现水平居中。

这种方法的优点是不会改变块级元素的类型,并且不会添加无语义标签,,不会增加嵌套层次;缺点是设置了position:relative,带来一定的副作用。

这三种方法使用比较多,各有优缺点,具体选用哪种方式可以视情况而定。

2.垂直居中

(1)父元素高度不确定的文本、图片、块级元素的垂直居中

通过给父容器设置相同上下内边距来实现垂直居中。

(2)父元素高度确定的单行文本的垂直居中

通过给父元素设置height和line-height来实现垂直居中,注意高度值和行高值相同。

(3)父元素高度确定的多行文本、图片、块级元素的垂直居中

css中有一个用于垂直居中的属性vertical-align:middle,只有将元素转化inline-block类型才能生效。但td标签默认情况下就隐式地设置了vertical的值为middle,所以不需要再显示地设置一次。
H-V

喜欢 3

文章评论 (0)

表情

大眼 可爱 大笑 坏笑 害羞 发怒 折磨 快哭了 大哭 白眼 晕 流汗 困 腼腆 惊讶 憨笑 色 得意 骷髅 囧 睡觉 眨眼 亲亲 疑问 闭嘴 难过 淡定 抗议 鄙视 猪头