各种居中方案
元素居中是常见的场景,此页为总结各种实现方式
水平居中
内联元素(inline,inline-block等),将父元素的text-align
属性设为center
。
text-align css属性定义行内内容(例如文字)如何相对它的块父元素对齐。
块级元素(block等),设置margin-left
,margin-right
为auto
,此时左右外边距会平分水平方向的多余空间,实现居中。注意块级元素要有固定宽度,否则会铺满父元素,占据100%宽度。
/* 内联元素 */ .inline-center-parent{ text-align:center; } /* 块级元素 */ .block-center{ width:60%; margin: 0 auto; }
垂直居中
相对于水平居中,垂直居中实现稍微复杂一些
内联元素的垂直居中
如果是单行时,设置元素了的line-height
与父元素的height
一致即可,line-height
会继承,设置在父元素上也一样。
/*容器样式*/ .inline-center-parent{ height: 100px; line-height: 100px; }
多行时,上面的样式就会出现问题,因为每行的高度都和容器高度一样,会溢出,此时可以使用table-cell
来实现居中。
/*容器样式*/ .inline-center-parent{ display: table-cell; vertical-align: middle; // 设置垂直居中 }
也可以将多行内联元素用块级元素包裹,然后就变成了块级元素的居中问题。
块级元素的垂直居中
- 垂直居中可以使用绝对定位处理,
top
设为50%
(top以容器的高度计算百分比
),然后再想办法让块元素向上移动自身的一半
- 如果是固定高度
.block-center-parent { position:relative; } .block-center { position:absolute; top:50%; height:100px; margin-top:-50px; // margin-top为负值,且为高度的一半 }
- 如果是高度不固定
一个思路是通过transform
变化(tranform平移以自身宽高进行计算),向上移动自身的一半
.block-center { position:absolute; top:50%; transform: translatey(-50%); }
另一个思路是通过margin:auto
,没错!垂直居中也可以使用margin:auto
来实现。
.block-center { position:absolute; top:0; left:0; bottom:0; right:0; height: max-content; width: max-content; margin:auto; }
margin-top
,margin-bottom
在普通情况下,设置为auto
时,默认为0
;但是绝对定位脱离文档流,又通过top,left,bottom,right指定子元素的边界后,子元素会默认填充整个容器,此时margin:auto
会让垂直方向上也平分多余空间。注意需要指定height和width,否则height和width会填充满整个空间,margin均为0;
- 使用flex
flex
应该是最便捷方式
.block-center-parent { display:flex; align-items:center; // 规定了交叉轴的对齐方式(默认情况下,垂直方向为交叉轴) }
垂直水平居中
上面的一些方式可以同时实现水平居中和垂直居中。
-
display: absolute
+margin:auto
.block-center { position:absolute; top:0; left:0; bottom:0; right:0; height: max-content; width: max-content; margin:auto; }
-
display: absolute
+transfrom
/* 水平方向也使用transform */ .block-center { position:absolute; top:50%; left:50%; transform: translatey(-50%); transform: translatex(-50%); }
display:flex
.block-center-parent { display:flex; justify-content:center; // 规定了主轴的对齐方式 align-items:center; // 规定了交叉轴的对齐方式 }
另一种方式是
.block-center-parent { display:flex; } .block-center { margin:auto; }
下一篇: 抢手贱货
推荐阅读
-
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
-
C#运算符大全_各种运算符号的概述及作用
-
IOS 常见内存泄漏以及解决方案
-
Juint4 @BeforeClass @AfterClass 等 都不执行 的解决方案 博客分类: junit技术 junit4annotation@AfterClass 等不执行解决方案
-
c#各种Timer类的区别与用法介绍
-
基于词库的中文转拼音优质解决方案(PHP)
-
【自创】微信扫码支付 自动跳转解决方案
-
Mysql彻底解决中文乱码问题的方案(Illegal mix of collations for operation)
-
PHP加Nginx实现动态裁剪图片方案
-
详解ASP.NET七大身份验证方式以及解决方案