CSS水平和垂直居中技术
程序员文章站
2022-05-01 23:27:44
...
水平居中
行内元素的水平居中
-
text-align:center
(在父元素中设置)
- 只对内联元素或行内块元素有效
- 需要放置于父元素中
块级元素的水平居中
margin: 0 auto;
- 只对块级元素有效
- auto指的是自适应宽度。实质就是均分了元素左右的剩余空间,所以元素会居中。
- auto只有在块级元素设置了宽度width才有效(块级元素不设宽度默认就占整行了,所以是废话)
- auto无法实现块级元素的垂直居中,原因与CSS默认的高度计算规则有关,这里暂不深究。但
margin:auto
可以实现绝对定位元素的水平垂直居中,见下文。 - 参考:为什么margin为auto不能垂直居中?、为什么「margin:auto」可以让块级元素水平居中?、张鑫旭——margin:auto实现绝对定位元素的居中及原理
垂直居中
行内元素的垂直居中
-
line-height: 父元素的高度;
(在父元素中设置)
- 只对内联元素或行内块元素有效
- 需要知道父元素的高度
- 需要放置于父元素中
- 适用于垂直方向上只有一个需要居中的元素的情况(想同时垂直居中多个元素时,可以用padding)
-
vertical-align: middle;
(用于垂直对齐inline元素)
- 只对内联元素或行内块元素有效
- 主要用在文本和与文本相邻元素的垂直方向上的对齐问题(主要是对齐的作用,而不是居中的作用),
例如将一个icon与文字对齐。
- 使用
vertical-align
需要了解文字的baseline和line-box等知识,可参考:[[翻译]关于Vertical-Align你需要知道的事情](https://segmentfault.com/a/11...、我对CSS vertical-align的一些理解与认识(一)
水平垂直居中
浮动元素
- 使用
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+,及其他浏览器。
- 参考:张鑫旭——margin:auto实现绝对定位元素的居中及原理
flex居中方式
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
- 块级元素设置
display: flex;
,内联元素设置display: inline-flex;
。
需要注意的几个问题
- 元素浮动后仍可以设置margin属性,但auto不会起作用。
- 图片居中的问题
- 注意:如果图片的宽度大于父元素的宽度, 不能使用
margin: 0 auto;
或者text-align: center;
让图片居中 - 如果图片的宽度大于父元素的宽度, 可以绝对定位中的居中方式让图片居中。但是定位流的弊端也比较明显。它必须知道图片宽度。
- 如果图片的宽度大于父元素的宽度, 也可以使用
margin: 0 -100%;
(注意: 父元素必须设置text-align: center;
)