纵横居中方法总结
时间:2023-04-02 18:44:10
HTML
前言:最近看到很多面试题问:请问有几种用CSS完成纵横居中的方法?我在看css基础的时候,看到一篇完全居中的文章。这里是对文章内容的总结。1、使用绝对居中(AbsoluteCentering)1.1具体代码如下:.container{position:relative;}.absolute_center{position:absolute;顶部:0;右:0;底部:0;左:0;宽度:50%;高度:50%;保证金:自动;填充:20px;overflow:auto;- 这个方法的核心思想是使用绝对定位布局,让当前元素脱离正常流体特性,并使用absolute流体特性
1.2该方法的核心思想是:使用absolute进行定位布局,脱离普通block形状元素的流体属性,以及垂直和水平居中是通过绝对的流体属性完成的。这里有两个需要知道的基础知识点:1、流体特性:块状水平元素,比如div元素,默认情况下(非浮动、绝对定位等),水平方向会自动填充外部容器;如果有margin-left/margin-right,padding-left/padding-right,border-left-width/border-right-width等,实际内容区域会相应缩小;2.absolute流体特性:默认不是流体特性,只有在一定条件下才有,这个条件是“同时发生相反方向定位时”,即左右定位在水平方向,top和bottom定位在垂直方向,当相反的方向同时有定位值时,absolute的流体属性就出现了。1.3优缺点:优点:1.兼容性好,绝对流畅的特性兼容IE7,兼容所有现代浏览器;2、没有额外的标记html元素,风格简洁;3.内容的宽高支持使用百分比和min-/max-写法;4.也支持图片文件;缺失:1.必须定义内容的高度;2.必须添加overflow属性,防止内容文字高度超出外容器时溢出;2.负边距这可能是目前最常用的方法。当元素的高宽为固定值时,将元素设置为相对布局,脱离文档流,设置top:50%;left:50%;,使用margin-left和margin-top使元素完全居中。2.1具体代码如下:.container{position:relative;宽度:100%;高度:100%;背景颜色:aliceblue;}.is-Negative{position:absolute;宽度:300px;高度:200px;填充:20px;位置:绝对;顶部:50%;左:50%;左边距:-170px;边距顶部:-120px;background-color:cornsilk;