CSS 实现水平垂直居中的方式
这是面试经常会被问的问题,以前自己也看过相关的博客内容,但总是面试的过程中只能想到简单的几种,今天做一个总结:
实现方式分为两类:1、已知元素的宽高确定 2、元素宽高不定(常问)
分别对应不同的处理方案
已知元素的宽高确定
1、absolute + 负margin
2、absolute + margin auto
3、absolute + calc
元素宽高不定
1、absolute + transform
2、lineheight
3、writing-mode
4、table
5、css-table
6、flex
7、grid
接下来分别说明:
元素高度确定
absolute + 负margin
子元素绝对定位,top和left分别为原来的50%, margin-left和margin-top为子元素宽度和高度的一半(具体像素值)
absolute + margin auto
子元素绝对定位,设置各个方向的距离都是0,margin设为auto,即可以实现在各个方向上居中
absolute + calc
子元素绝对定位,利用css3的计算属性calc,top和left为原来的50%减去子元素宽度和高度的一半,如图:
元素高度不定
absolute + transform
子元素绝对定位,利用css3新添加的transform,transform的translate属性也可以设置百分比,其是相对于自身的宽和高,所以可以将translate设置为-50%,即可以做到居中了。如图:
lineheight(文本内容水平垂直居中)
利用行内元素居中属性 ,把box设置为行内元素,通过text-align即可以做到水平居中(父元素),通过vertical-align也可以在垂直方向做到居中(子元素)。如图:
writing-mode(很少有人知道的属性)
writing-mode可以改变文字的显示方向,比方可以通过writing-mode让文字的显示变为垂直方向( writing-mode: horizontal-tb;),配合通过text-align即可以做到水平和垂直方向的居中。但是:需要设置层三层结构,第二层垂直居中,第三层水平居中。
table
tabel单元格中的内容天然就是垂直居中的,只需增加一个水平居中text-align就好了
css-table
css新添加的table属性,可以让我们把普通元素,变为table元素
父元素 display: table-cell;
text-align: center;
vertical-align: middle;
子元素: display: inline-block;
flex
父元素 display: flex;
justify-content: center;
align-items: center;
grid
css新出的网格布局,兼容性不太好
父元素 display: grid;
子元素 align-self: center; justify-self: center;
这是目前总结出的css实现水平垂直居中的方案,假如还有其余方式,欢迎补充!
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS 实现水平垂直居中的方式