资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/不定元素宽高用css实现内容水平和垂直都居中

不定元素宽高用css实现内容水平和垂直都居中

Chao / 2917人阅读

摘要：在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。这篇文章就来总结一下都有哪些方法可以实现水平和垂直都居中。表示这些元素将相对于本容器水平居中，也是同样的道理垂直居中。

在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。而且我们希望不要涉及宽度和高度，也就是说，我们不知道父元素的宽高，也不知道内容元素的宽高。这篇文章就来总结一下都有哪些方法可以实现水平和垂直都居中。

不适合的方案 text-align和line-height

显然，使用text-align和line-height的方式更适合单排文字，而不适合本文的需求。特别是line-height，无法保证在不知道高度的情况下还能垂直居中。而且就算是文字，我们也不知道文字有多少行。

position:absolute、50%和margin:-px

绝大多数情况下，我们可以考虑这种方案，让想要居中的元素通过定位和margin为负值进行偏移的方法让它在垂直方向上居中。这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作。但是这里有一个问题，就是我们的需求往往是内部的这个元素的宽度高度也不确定，比如是一段文字，你无法保证这段文字的字数多少，所以通过margin为负值来偏移在这种情况下行不通。

position:fixed、0和margin:auto

当我们要制作一个modal dialog弹出框时，比如弹出居中于屏幕的广告或登录框。这个时候可以考虑一些相对于窗口或网页居中的方案。





 this is a box fixed in center of screen

这里面最重要的是margin: auto;，对于块级元素而言，确定了自己的宽度之后，margin:auto可以帮助它居中，即使在position:fixed时。不过必须规定要居中的元素的宽高度，无法满足我们的需求。

position:absolute、0和margin:auto

上面的fixed方案只适合在整个窗口实现居中。fixed会使元素脱离网页，因此在内容流中还是不适用。在内容流中也想实现居中，可以如下：

 



    
This is a p

    



















    

        this is a box fixed in center of screen

首先是仿造上面一个方法，使用margin:auto，只不过使用absolute。使用absolute定位的话，父级元素必须也具有position（不为static）。所以把.inner放在一个有position的父级元素.container。这样.inner相对于.container就是居中的（前提还是.inner要有宽高）。接下来的问题就是怎样让.container具备和内容相同的高宽，通过.container的父级元素为position:relative，.container为absolute，再使用100%使.container和父级元素宽高相同即可。同理因为要设定宽高，所以不满足我们的需求。

正确的方案 display:table和vertical-align:middle

这个方案是理解上最容易的，因为table具备垂直居中的属性，所以很容易通过属性就能实现。





  

    you own content

这种情况下，我们可以通过随意改变.inner的宽高，当内部的内容仍然保持居中状态。

DEMO

position:absolute、50%和translate

在css3里面提供了translate函数，它的主要作用是位移，传给transform属性。





  

    your own content

html代码和上面一样。translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%。这种方法其实和最上面被否定掉的margin负值用法一样，可以说是margin负值的替代方案。这样你就非常容易理解了。这个方法最厉害的地方是不需要确定.inner的宽高，而.container的宽高也不需要手动设置，如果它自己本身就被撑大的话。这里只是为了演示方便，才特意给它设置了宽高。

DEMO

vw vh和translate

vh和vw是两个比较偏的单位，是指“viewport的height和width的1%”，比如说50vh就是当前视口（窗口的高度，实验中包含了滚动条）高度的50%。也就是说1vw将等于和1%的window宽度差不多的值。因此用在fixed的时候更加适合。





    this is a box fixed in center of screen

其实和使用50%没有太大的差别，因为这时top、left取的50%是相对于父元素的，和margin、padding不一样。如果非得要margin的话，就可以从这里衍生出变体：

 .inner2 {
   position:fixed;
   top: 0;
   left: 0;
   margin: 50vh 0 0 50vw;
   transform: translate(-50%, -50%);
 }

vh vw只能从窗口的大小去考虑，不适合正常的文本流。不过有的时候可以非常有用，特别是在做全屏应用的时候，比如full page。我把两种方案都放在了演示中，你可以在DEMO查看。

DEMO

:before和display:inline-block

这也是一种处理方式，通过伪类:before在元素内增加新元素后在用display:inline-block，通过高度的处理得到想要的效果。





    

        this is a box fixed in center of screen
The second line

这个方案是比较特别一些，不是很好理解。首先，.container水平居中没问题。接着，给.container伪类:before设定为height:100%，这样可以用一个伪元素在.container获得与父元素等高的空间。然后用inline-block和vertical-align: middle改变对齐的基线，关于这一点，我也不甚懂，这里有一篇文章可以参考。通过:before之后，.container内的行级元素的对齐基线就跑到居中的位置，也就实现了垂直居中对齐。这个时候，如果里面仅一排文字，其实可以不用.inner，但是上面的例子里面有一个
，这就不一样了。如果直接把文字放在.container里面，
之前的文字会基于:before基线，会保持垂直对齐的状态。但是
之后的文字会另起一行，这一行将起始于:before的下一行，所以会在:before的100%高度下面，导致被顶出.container。但是如果把文字放在.inner里面，再让.inner为inline-block，就可以使.inner和:before处于同一基线，这样就让整个.inner处于垂直居中的状态。

DEMO

css3 display:flex

css3新增了布局相关的属性，其中flex布局可以非常简单地帮我们实现我们想要的效果。





    

        this is a box fixed in center of screen
The second line

简单解释一下，当display: flex时，表示该容器内部的元素将按照flex进行布局。align-items: center表示这些元素将相对于本容器水平居中，justify-content: center也是同样的道理垂直居中。对.container赋予了这些样式之后，作为它的内部元素.inner自己自觉的居中了。而且这里你会发现，由于没有使用text-align: center，.inner里面的文字是不会居中的，也就是说仅仅.inner这个容器居中而已。

DEMO

总结

从上面的几种可行的方案，大致可以分为两类：display对齐方案、translate位移方案。display方案是充分发挥css的布局特性，利用布局和UI引擎的特性来控制布局中的对齐方式。而translate方案则是利用位移，通过先50%的位移，可以是通过position，也可以是通过margin vw vh，但是完成之后，在通过translate把元素拉回去，之所以用translate而不是margin是因为translate是相对于元素本身，而margin不是。

本文发表在我的博客 http://www.tangshuang.net/319...
如有疑问或不足之处，请到博客留言

云服务器 GPU云服务器 水平垂直居中 实现垂直居中 垂直居中 文字垂直居中

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

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

相关文章

  • css table布局大法，解决你大部分居中、多列等高、左右布局的问题

    摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...

    lijinke666 评论0 收藏0

  • css table布局大法，解决你大部分居中、多列等高、左右布局的问题

    摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...

    hedge_hog 评论0 收藏0

  • css table布局大法，解决你大部分居中、多列等高、左右布局的问题

    摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...

    kun_jian 评论0 收藏0

  • 【CSS】水平垂直居中的4种实现（宽高不定）

    摘要：水平垂直居中的种方案宽高不定方案中我也给了宽高但并不是说宽高固定了。下面四种方案都是能够实现当父元素或子元素的宽高发生改变时依旧维持水平垂直居中布局的方案。 水平垂直居中的4种方案(宽高不定) 方案中我也给了宽高,但并不是说宽高固定了。而是以为不给宽高无法看到效果。这个方案不固定宽高的是指,用这个方案之后,如果你父元素、子元素的宽高发生了改变,依旧可以保证是水平垂直居中的位置。 下面四...

    cppowboy 评论0 收藏0

  • CSS实现水平垂直居中的1010种方式（史上最全）

    摘要：划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个仓库，欢迎大家仅居中元素定宽高适 划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 showImg(https://segmentfault.com/im...

    YuboonaZhang 评论0 收藏0

发表评论

登陆后可评论

0条评论

Chao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<