垂直水平居中方法小结

智数航标
• 阅读 1231

前言:
最近看到很多面试题目会问:请说出几种使用css完成垂直水平居中的方法?正好看css基础的时候看到一篇文章是讲完全居中的,这边对于文章中的内容做个小结。


一、使用absolute(Absolute Centering)

1.1 具体代码如下:

.container {
    position: relative;
}

.absolute_center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 20px;
    overflow: auto;
}
<div class="container">
    <div class="absolute_center">
        <ul>
            <li>
                该方法的核心思想是是使用绝对定位布局,使当前元素脱离正常的流体特性,而使用absolute的流体特性
            </li>
        </ul>
    </div>
</div>

垂直水平居中方法小结

1.2 该方法的核心思想是:

使用absolute进行定位布局,脱离正常的块状元素流体特性,而通过absolute的流体特性完成垂直水平居中。

这里有两个基本知识点需要知道:

1.流体特性:
块状水平元素,如div元素,在默认情况下(非浮动、绝对定位等),水平方向会自动填满外部的容器;如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等,实际内容区域会响应变窄;

2.absolute流体特性:
默认是不具有流体特性的,而是在特定条件下才具有,而这个条件就是"对立方向同时发生定位的时候",即left与right为水平方向定位,top与bottom为垂直方向定位,而当对立方向同时具有定位数值的时候,absolute的流体特性就发生了。

1.3 优缺点:

优:
1.兼容性好,absolute流体特性IE7就兼容了,可兼容所有现代浏览器;
2.没有额外的标记html元素,样式简单;
3.内容的宽度以及高度写法支持使用百分比以及min-/max-写法;
4.对图像文件也同样支持;

缺:
1.必须定义内容的高度;
2.必须增加overflow属性来阻止如果内容的文本高度超出外层容器时出现的溢出情况;

二、负值外补侗法(negative margins)

这可能是目前最常用的方法,在元素的高度以及宽度是固定数值的时候,通过设置该元素为相对布局脱离文档流,并设置top: 50%; left: 50%;,使用margin-left以及margin-top使元素完全居中。

2.1 具体代码如下:

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Negative {
    position: absolute;
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -120px;
    background-color: cornsilk;
}
<div class="container">
    <div class="is-Negative">
    </div>
</div>

垂直水平居中方法小结

2.2 该方法的核心思想是:

使用相对布局,并使用top以及left使内容置于容器中心部位,再使用margin来控制偏移量。

这里有有个注意点:


当使用box-sizing:border-box属性的时候,偏移量是不需要计算border以及padding的。

2.3 优缺点:

优:
1.兼容性好,包括IE6-IE7
2.没有额外的标记html元素,代码量少;

缺:
1.非响应式的,不能配合百分比以及min-/max-使用;
2.必须增加overflow属性来阻止如果内容的文本高度超出外层容器时出现的溢出情况;
3.当元素使用box-sizing:border-box和使用默认的content-box偏移量是不一样的,需要重新计算;

三、使用Transforms

3.1 具体代码如下:

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Transformed { 
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%; 
    left: 50%;
    padding: 20px;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    background-color: darkseagreen;
}
<div class="container">
    <div class="is-Transformed">
        <ul>
            <li>
                该方法的核心思想是使用相对布局,并使用top以及left使内容置于容器中心部位,再使用translate来控制偏移量
            </li>
        </ul>
    </div>
</div>

垂直水平居中方法小结

3.2 该方法的核心思想是:

使用相对布局,并使用top以及left使内容置于容器中心部位,再使用transform来控制偏移量。

3.3 优缺点:

优:
1.内容宽度以及高度自适应,可以不指定内容的宽度以及高度;
2.代码量少

缺:
1.兼容性差了点,由于transform不兼容IE8,所以只支持IE9及其以上的现代浏览器;
2.为了兼容各种浏览器,需要些额外的css前缀;
3.如果元素有使用transform属性,可能会影响到其他的变换效果;
4.在有些时候会出现边缘模糊的情况,这是浏览器渲染的问题,尤其是使用了transform-style: preserve-3d属性的时候

四、使用Table-Cell

这可能是最好的垂直居中的方案,但存在一个最大的问题,需要额外的html元素,要使用table-cell完成垂直居中效果需要3个元素来完成。

4.1 具体代码如下:

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Table { 
  display: table; 
}

.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}

.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  background-color: deepskyblue;
}
<div class="container is-Table">
    <div class="Table-Cell">
        <div class="Center-Block">
            使用table-cell完成垂直水平居中
        </div>
    </div>
</div>

@import "./absolute_center4.png"{width="50%"}

4.2 该方法的核心思想是:

使用表格来实现垂直居中,再使用margin: 0 auto;来实现水平居中。

具体操作步骤如下:
1.设置父元素为块级表格;
2.设置子元素为表格单元格;
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中;
4.设置子元素中的内容的宽度,添加margin: 0 auto;属性,使子元素水平居中。

4.3 优缺点:

优:
1.内容高度自适应;
2.如果子元素的内容溢出,会拉伸父元素的高度;
3.兼容性好,兼容到IE8;

缺:
1.完成一个垂直居中效果,需要3个html元素;

五、使用Inline-block

这也是一种常用的垂直水平居中的方法,但会存在一个问题:当内容的宽度大于容器宽度-0.25em的时候,会发生内容上移到顶部的方法,所以需要一些小的技巧来避免这样的问题。

5.1 具体代码如下:

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  background-color: greenyellow;
  padding: 20px;
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}
<div class="container is-Inline">
    <div class="Center-Block">
        使用inline-block完成水平垂直居中
    </div>
</div>

垂直水平居中方法小结

5.2 该方法的核心思想是:

和table有点类似,设置内容为inline-block块,设置vertical-align: middle;属性使元素垂直方向居中,再父容器设置text-align:center;使子元素水平方向居中;

5.3 优缺点:

优:
1.内容高度自适应;
2.如果子元素的内容溢出,会拉伸父元素的高度;
3.兼容性好,兼容到IE7;

缺:
1.依赖margin-left:-0.25em来矫正水平方向居中的误差;
2.内容的宽度必须小于容器的宽度减去0.25em。

六、使用Flexbox

弹性布局是当前移动端比较流行的布局方式,它可以很优雅的完成垂直水平居中效果。

6.1 具体代码如下:

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.center_block {
  background-color: wheat;
  padding: 20px;
}
<div class="container is-Flexbox">
  <div class="center_block">
    使用flexbox完成水平垂直居中
  </div>
</div>

垂直水平居中方法小结

6.2 该方法的核心思想是:

使用弹性布局,align-items: center;使元素在侧轴方向居中(默认是垂直方向),justify-content: center;使元素在主轴方向居中(默认是水平方向);

6.3 优缺点:

优:
1.内容宽度、高度自适应,即便文本溢出也很优雅;
2.可以使用很多弹性布局的新特性;

缺:
1.兼容性比较差,目前只有IE10以上兼容;
2.需要写额外的兼容性前缀;
3.各个浏览器的表现可能会有一些差异;  

点赞
收藏
评论区
推荐文章
LinMeng LinMeng
4年前
css之元素居中
行内元素居中文本垂直居中单行文本垂直居中设置lineheight与盒子高度一样就行这里有一个误区,我经常在设置单行文本居中的时候,会习惯性的设置height属性与linheight属性一样,其实完全没必要,只设置lineheight就行,这时候盒子的高度由lineheight撑起来,与height完全相同。多行文本垂直居中1.ve
Chase620 Chase620
4年前
给公司面试了100多个前端,心态差点给爷整崩了
公司最近在做扩招,从去年到现在给公司面试前端,到现在大概面了100200个,给我整哭了简历简历不带,问点基础题,一问三不知,问个水平垂直居中布局,支支吾吾半天说不出来,还有个弟弟说你这样问我不知道怎么回答,累了。我只想说,这真的有三年的经验嘛?(https://imghelloworld.osscnbeijing.aliyu
Nick16 Nick16
4年前
前端面试题全覆盖整理
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上:css相关1.万能居中1.margin:0auto;水平2.textalign:center;水平3.行高,垂直4.表格
Stella981 Stella981
3年前
CSS兼容性(IE和Firefox)技巧大全
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE影响CSS处理,作为W3C的标准,一定要加DOCTYPE声明。CSS技巧1.div的垂直居中问题verti
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
HTML中经常用到的对齐,居中方式
在编写一片网页时,我们经常需要使一些文本或者图片,盒子居中!但是在众多的写法里,那些才能使我们的目的最快,最有效的达到呢!居中也是有轴线之分的,水平轴,垂直于水平轴的轴,交叉轴。1盒子居中margin:auto;通常在这此行只有一个盒子的情况下使用\需要定宽\常规流和浮动不用\2文本居中   定义水平轴线对齐方式flexst
Wesley13 Wesley13
3年前
LODOP打印项水平居中
LODOP控制打印项水平居中,可以用如下语句,该语句控制的是打印项本身在纸张中水平居中。LODOP.SET\_PRINT\_STYLEA(0,"Horient",2);这个根据大的打印项本身的宽度,如果打印项本身内部不是居中的,那么加了这句,内容也不会居中。之前有博文介绍过打印项在纸张中受到的各种边距:LODOOP中的各种边距打印项
Wesley13 Wesley13
3年前
Flex PopUpManager 弹出窗口居中
今天看到窗口居中弹出,我便想到了Alert,既然Alert每次都能居中弹出,为什么我们自定义的窗口不能居中弹出呢,所以,我查看了下Alert的show方法,放到我的代码中,果然也能居中弹出了,不论布局是如何设计的,下面是主要代码://自定义弹出的窗口大小vartitle:TitleWindownewTitleWindow();
Wesley13 Wesley13
3年前
LODOP打印图片水平居中
其他居中,查看本博客相关博文:LODOP中打印项水平居中简短问答(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fhuaxie%2Fp%2F11988181.html)、图片也属于超文本打印项,因此如果想把图片居中,也需要图片本身内容相对于图片打
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(