CSS水平和垂直居中技巧大梳理

水平居中

行内元素的水平居中

text-align:center(在父元素中设置)

只对内联元素或行内块元素有效

需要放置于父元素中

块级元素的水平居中

margin:0auto;

只对块级元素有效

auto指的是自适应宽度。实质就是均分了元素左右的剩余空间,所以元素会居中。

auto只有在块级元素设置了宽度width才有效(块级元素不设宽度默认就占整行了,所以是废话)

auto无法实现块级元素的垂直居中,原因与CSS默认的高度计算规则有关,这里暂不深究。但margin:auto可以实现绝对定位元素的水平垂直居中,见下文。

垂直居中

行内元素的垂直居中

line-height:父元素的高度;(在父元素中设置)

只对内联元素或行内块元素有效

需要知道父元素的高度

需要放置于父元素中

适用于垂直方向上只有一个需要居中的元素的情况(想同时垂直居中多个元素时,可以用padding)

vertical-align:middle;(用于垂直对齐inline元素)

只对内联元素或行内块元素有效

主要用在文本和与文本相邻元素的垂直方向上的对齐问题(主要是对齐的作用,而不是居中的作用),

例如将一个icon与文字对齐。

使用vertical-align需要了解文字的baseline和line-box等知识

水平垂直居中

浮动元素

使用position:relative;

具体方法与绝对定位的第1个和第2个方法类似,只不过把absolute改为relative,并根据原float的方向稍作修改即可。

相对定位relative可以和float叠加,在float后的位置上再相对定位。

缺点就是float元素居中后仍会占据原来的位置。

第二种方式中,如果设定了浮动元素的高度,将会影响transform的具体值。

绝对定位元素

使用50%推进法则

position:absolute;

left:50%;

top:50%;

margin-left:-该元素自身宽度的一半px;/*水平居中*/

margin-top:-该元素自身高度的一半px;/*垂直居中*/

只对绝对定位的元素有效

需要知道绝对定位元素的宽高

兼容性很好,是一种主流用法

第一种方法的改进版,使用transform代替margin

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);/*水平垂直居中*/

不需要知道绝对定位元素的宽高。(如果设置了高度,则有可能影响到transform的具体值)

兼容性一般,IE10+以及其他现代浏览器支持

使用margin:auto;

position:absolute;

left:0;

right:0;/*水平居中*/

top:0;

bottom:0;/*垂直居中*/

margin:auto;

只对绝对定位的元素有效

不必知道宽高,但需要是图片这种自身包含尺寸的元素

left与right必须配对出现,top与bottom必须配对出现

目前支持IE9+,及其他浏览器。

flex居中方式

display:flex;

justify-content:center;/*水平居中*/

align-items:center;/*垂直居中*/

块级元素设置display:flex;,内联元素设置display:inline-flex;。

需要注意的几个问题

元素浮动后仍可以设置margin属性,但auto不会起作用。

图片居中的问题

注意:如果图片的宽度大于父元素的宽度,不能使用margin:0auto;或者text-align:center;让图片居中

如果图片的宽度大于父元素的宽度,可以绝对定位中的居中方式让图片居中。但是定位流的弊端也比较明显。它必须知道图片宽度。

如果图片的宽度大于父元素的宽度,也可以使用margin:0-100%;

注意:父元素必须设置text-align:center;

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181016A0GGZO00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券