使一个div垂直+水平居中的几种方法

joyqi 发布于2019-08-29 11:04 / 2464人阅读

摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内

前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题：

思路1：绝对定位居中（原始版）

这个是我回答出来的，也是被各位所熟知的一种方法，设外层div相对定位，内层div绝对定位，top、left分别设为50%，然后通过设置margin-top、margin-left值为宽度的负数就可以成功实现垂直水平居中了：




    
    Document

很常见的，这个经典的方法最大的不足之处是inner的宽度必须是固定值，否则margin-top和margin-left的值将无法设置，为了解决这个问题，我们考虑将使inner发生位移的代码由margin-top、margin-left换成其他形式，换成什么呢？请看第二种方法：

思路2：绝对定位居中（改进版之一）

我们的目的是让inner在top和left方向发生50%偏移之后，再往回偏移一定距离，而css里关于位置偏移的属性还有什么呢？当我们查阅最新版的css3属性之后，发现这样一个属性：selector{transform：translate();},translate代表着水平、垂直方向上的转换（位移），其中当括号内的值设为百分比时，将以元素自身宽度为基准，移位相应的宽度，这样一来，我们的问题就得到了解决：

这个方法妥善解决了内层div宽度不确定的问题，但由于使用了css3的新属性，在低版本ie浏览器下是不兼容的。由此，我们想到了第三种方法：

思路3：绝对定位居中（改进版之二）

这个方法，不仅能在inner宽度不确定时发挥作用，还能兼容各种主流浏览器，看上去似乎很完美，但事实上，当我们的需求改为：宽度随内部文字自适应，即宽度未设置时，这种方法就无法满足需求了，原因是left、right设为0后，inner在宽度未设置时将占满父元素的宽度。

（你可以在思路二的基础上将inner宽度去掉，内部放一些文字，你会发现在第二种思路下这种需求是可以满足的）

思路4：flex布局居中

flex布局是移动端一种很新潮的布局方法，利用flex布局使元素垂直水平居中，缺点依然是令人头疼的兼容性问题（在ie11-中不起作用），优点是代码量比前几种方法相比略少，方便使用。
让我们一起来了解一下：




    
    Document



    
        这是一段文字这是一段文字这是一段文字

以上就是使div垂直+水平居中的四种方式，关于第三种思路中inner无法对内容自适应的问题，目前我还没有想出解决办法，希望高人们能够指点一二。

参考文章:小tip: margin:auto实现绝对定位元素的水平垂直居中--来自张鑫旭-鑫空间-鑫生活

云服务器 GPU云服务器水平垂直居中 html使文字垂直居中 js缓存的几种方法最基本的几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111405.html

(面试题)垂直居中的几种实现方式

摘要：尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例一个的在一个水平垂直居中，用实现。首先定义元素层和垂直居中无关的样式直接定义在里。相比较水平居中，垂直居中比较复杂点。尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例：一个200*2...

cheukyin 2019-08-30 11:18 评论0 收藏0
CSS居中总结大全

摘要：中居中的几种方式水平居中块级元素在块级元素中居中设置在子元素上，前提是不受影响只对行级元素有用行级元素设置浮动，或者设置定位之后。 CSS中居中的几种方式 1.水平居中margin：0 auto；块级元素在块级元素中居中设置在子元素上，前提是不受float影响 2.text-align只对行级元素有用,行级元素设置浮动，或者设置定位之后。给它的父元素设置text-aglin：cente...

Cruise_Chan 2019-08-30 15:55 评论0 收藏0
web开发常用的几种居中形式

摘要：一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素有属性给元素添加代码演示此外，和产生同样效果的原因移步要居中的元素没有属性给添加属性，并在的外面包一层且添加是让块状里面的元素比如文字居中。一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素A有width属性给元素A添加 margin：0,auto；(代码演示) showImg(h...

zqhxuyuan 2019-08-21 16:23 评论0 收藏0
web开发常用的几种居中形式

摘要：一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素有属性给元素添加代码演示此外，和产生同样效果的原因移步要居中的元素没有属性给添加属性，并在的外面包一层且添加是让块状里面的元素比如文字居中。一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素A有width属性给元素A添加 margin：0,auto；(代码演示) showImg(h...

brianway 2019-08-29 13:23 评论0 收藏0
css水平垂直居中

摘要：要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。把元素设为方法在父元素中设置和然后设置垂直对齐方式为居中就可以适合父元素高固定的，毕竟要设置行高。本篇博客首发于本人博客水平垂直居中要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。下面是我总结的几种方法废话不多说，直接上菜。showImg(http://ooa3lxrpg....

jaysun 2019-08-29 12:39 评论0 收藏0