当前位置: 首页 > Web前端 > HTML

纵横居中方法总结

时间: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;
2.2该方法的核心思想是:使用相对布局,并使用top和left将内容放在容器的中心,然后使用margin来控制偏移量。这里需要注意一点:使用box-sizing:border-box属性时,offset不需要计算border和padding。2.3优缺点:优点:1.兼容性好,包括IE6-IE72。没有额外的标记html元素,代码量小;缺点:1.无响应,不能与百分比和min-/max-一起使用;2.必须添加overflow属性,防止内容文字高度超出外容器时溢出;3、当元素使用box-sizing:border-box和默认的content-box偏移量不同时,需要重新计算;3、使用Transforms3.1具体代码如下:.container{position:relative;宽度:100%;高度:100%;背景色:aliceblue;}.is-Transformed{宽度:50%;保证金:自动;位置:绝对;顶部:50%;左:50%;填充:20px;-webkit-transform:翻译(-50%,-50%);-ms-transform:翻译(-50%,-50%);转换:翻译(-50%,-50%);background-color:darkseagreen;3.2这种方法的核心思想是:使用Relative布局,并且使用top和left将内容放在容器的中心,然后使用transform来控制偏移量。3.3优缺点:优点:1、内容宽高自适应,不能指定内容宽高;2、代码量不足:1、兼容性有点差,因为transform不兼容IE8,所以只支持IE9及其以上的现代浏览器;2.为了兼容各种浏览器,需要额外添加一些css前缀;3、如果元素使用了transform属性,可能会影响其他的变换效果;4.有时边缘会出现模糊的情况,这是浏览器渲染问题,尤其是在使用transform-style:preserve-3d属性时4.使用Table-Cell可能是最好的垂直居中方案,但是有一个最大的问题,其中需要额外的html元素,使用table-cell来完成垂直居中效果需要3个元素来完成。4.1具体代码如下:.container{position:relative;宽度:100%;高度:100%;背景色:aliceblue;}.container.is-Table{显示:表格;}.is-Table.Table-Cell{显示:表格单元格;vertical-align:middle;}.is-Table.Center-Block{width:50%;保证金:0自动;填充:20px;background-color:deepskyblue;使用table-cell完成垂直和水平居中@import"./absolute_center4.png"{width="50%"}4.2这种方法的核心思想是:利用table实现垂直居中,然后利用margin:0自动;实现水平居中。具体操作步骤如下:1、设置父元素为块级表;2、将子元素设置为表格单元格;3、给子元素添加vertical-align:middle属性,单元格已经垂直居中;4.设置子元素元素中内容的宽度,加上margin:0auto;属性使子元素水平居中。4.3优缺点:优点:1、内容高度自适应;2.如果子元素的内容溢出,会拉伸父元素的高度;3、兼容性好,兼容IE8;缺点:1、完成一个垂直居中的效果,需要3个html元素;5、使用Inline-block也是一种常见的纵横居中方式,但是会出现一个问题:当内容宽度大于容器宽度-0.25em时,内容会上移到top方式,所以需要一些小技巧来避免此类问题。5.1具体代码如下:.container{position:relative;宽度:100%;高度:100%;背景色:aliceblue;}.container.is-Inline{文本对齐:居中;溢出:自动;}.容器。is-Inline:after,.is-Inline.Center-Block{显示:内联块;vertical-align:middle;}.container.is-Inline:after{content:'';高度:100%;左边距:-0.25em;/*偏移间距。可能因字体而异*/}.is-Inline.Center-Block{background-color:greenyellow;填充:20px;最大宽度:99%;/*防止长内容导致内容块被推到顶部的问题*//*max-width:calc(100%-0.25em)/*仅适用于IE9+*/}使用inline-block完成水平和垂直居中5.2该方法的核心思想是:类似table,将内容设置为inline-block块,设置vertical-align:middle;属性让元素垂直居中,然后在父容器中设置text-align:center;水平居中子元素;5.3优缺点:优点:1.内容高度自适应;2.如果子元素的内容溢出,会拉伸父元素的高度;3、兼容性好,兼容IE7;缺失:1.依赖margin-left:-0.25em纠正水平居中误差;2、内容的宽度必须小于容器的宽度负0.25em6、使用Flexbox弹性布局是目前移动端比较流行的一种布局方式,可以优雅的完成纵横居中的效果。6.1具体代码如下:.container{position:relative;宽度:100%;高度:100%;背景色:aliceblue;}.container.is-Flexbox{显示:-webkit-box;显示:-moz-box;显示:-ms-flexbox;显示:-webkit-flex;显示:弹性;-webkit-box-align:居中;-moz-box-align:居中;项目:中心;对齐项目:居中;-webkit-box-pack:中心;-moz-box-pack:中心;-ms-flex-pack:中心;-webkit-justify-content:居中;center;}.center_block{背景色:小麦;padding:20px;利用flexbox完成水平和垂直居中6.2该方法的核心思想是:使用弹性布局,align-items:center;使元素在横轴方向居中(默认为竖直方向),justify-content:center;使元素在主轴方向居中(默认为水平方向);6.3优缺点:优点:1、内容宽高自适应,即使文字溢出也优雅;2.可以使用灵活布局的许多新特性;缺点:1.兼容性比较差,目前只兼容IE10以上;2..需要写一个额外的兼容性前缀;3、各个浏览器的性能可能存在一些差异;