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

在开发中经常遇到这个问题，即让某个元素的转载请注明出处：www.tangshuang.net原创内容，盗版必究。内容在水平和垂直方向上都居中，内容不仅限【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】于文字，可能是图片或其他元素。而且我们希【版权所有，侵权必究】【版权所有，侵权必究】望不要涉及宽度和高度，也就是说，我们不知【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。道父元素的宽高，也不知道内容元素的宽高。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】这篇文章就来总结一下都有哪些方法可以实现【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】水平和垂直都居中。

不适合的方案【版权所有】唐霜 www.tangshuang.net

text-align和line-heig【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】ht

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

显然，使用text-align和line本文作者：唐霜，转载请注明出处。【作者：唐霜】-height的方式更适合单排文字，而不【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】适合本文的需求。特别是line-heig【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ht，无法保证在不知道高度的情况下还能垂【版权所有】唐霜 www.tangshuang.net【作者：唐霜】直居中。而且就算是文字，我们也不知道文字著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】有多少行。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】本文作者：唐霜，转载请注明出处。

position:absolute、50未经授权，禁止复制转载。未经授权，禁止复制转载。%和margin:-px

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【作者：唐霜】转载请注明出处：www.tangshuang.net

绝大多数情况下，我们可以考虑这种方案，让【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】想要居中的元素通过定位和margin为负【版权所有】唐霜 www.tangshuang.net【本文受版权保护】值进行偏移的方法让它在垂直方向上居中。这原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。种方案不要求父元素的高度，也就是即使父元【本文首发于唐霜的博客】【未经授权禁止转载】素的高度变化了，仍然可以保持在父元素的垂【作者：唐霜】本文作者：唐霜，转载请注明出处。直居中位置，水平方向上是一样的操作。但是【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】这里有一个问题，就是我们的需求往往是内部【关注微信公众号：wwwtangshuangnet】【转载请注明来源】的这个元素的宽度高度也不确定，比如是一段【未经授权禁止转载】【本文首发于唐霜的博客】文字，你无法保证这段文字的字数多少，所以【本文受版权保护】本文作者：唐霜，转载请注明出处。通过margin为负值来偏移在这种情况下原创内容，盗版必究。【本文首发于唐霜的博客】行不通。

position:fixed、0和mar原创内容，盗版必究。原创内容，盗版必究。gin:auto

当我们要制作一个modal dialog【本文受版权保护】【原创内容，转载请注明出处】弹出框时，比如弹出居中于屏幕的广告或登录原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】框。这个时候可以考虑一些相对于窗口或网页【作者：唐霜】【原创内容，转载请注明出处】居中的方案。

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【转载请注明来源】

<style> 
.container {
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   margin:auto; 
}
</style>
<div class="container" style="width: 300px; height: 200px; background: #f1f1f1"> this is a box fixed in center of screen</div>

这里面最重要的是著作权归作者所有，禁止商业用途转载。margin: auto;，对于块级元素而言，确定了自己的宽度之后【版权所有】唐霜 www.tangshuang.net【本文受版权保护】，margin:auto可以帮助它居中，【本文受版权保护】【版权所有】唐霜 www.tangshuang.net即使在position:fixed时。不【本文受版权保护】【未经授权禁止转载】过必须规定要居中的元素的宽高度，无法满足【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】我们的需求。

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

position:absolute、0和【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netmargin:auto

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

<style>
  .container {
    position: relative;
  }
  .inner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .inner {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
</style>
<div class="container">
    <p>This is a p</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="inner-wrapper">
        <div class="inner" style="width: 300px;height: 200px;background: #f1f1f1">
        this is a box fixed in center of screen
        </div>
    </div>
</div>

首先是仿造上面一个方法，使用margin本文作者：唐霜，转载请注明出处。原创内容，盗版必究。:auto，只不过使用absolute。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。使用absolute定位的话，父级元素必【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。须也具有position（不为stati【转载请注明来源】【原创不易，请尊重版权】c）。所以把.inner放在一个有pos【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ition的父级元素.container未经授权，禁止复制转载。【转载请注明来源】。这样.inner相对于.contain【原创内容，转载请注明出处】【未经授权禁止转载】er就是居中的（前提还是.inner要有【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】宽高）。接下来的问题就是怎样让.cont【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ainer具备和内容相同的高宽，通过.c【本文受版权保护】原创内容，盗版必究。ontainer的父级元素为positi【原创内容，转载请注明出处】【未经授权禁止转载】on:relative，.contain【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】er为absolute，再使用100%使【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。.container和父级元素宽高相同即本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】可。同理因为要设定宽高，所以不满足我们的未经授权，禁止复制转载。未经授权，禁止复制转载。需求。

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。未经授权，禁止复制转载。

正确的方案【转载请注明来源】

display:table和diapla著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nety:table-cell

未经授权，禁止复制转载。未经授权，禁止复制转载。【未经授权禁止转载】

【转载请注明来源】【原创不易，请尊重版权】【本文受版权保护】

<style>
.container {
  display: table;
}
.inner {
  display: table-cell;
  vertical-align:middle;
  text-align:center;
}
</style>
<div class="container">
  <div class="inner">
  you own content
  </div>
</div>

这种情况下，我们可以通过随意改变.inn【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.neter的宽高，当内部的内容仍然保持居中状态原创内容，盗版必究。【本文首发于唐霜的博客】。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】 DEMO转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。未经授权，禁止复制转载。

position:absolute、50著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】%和translate

<style>
.container {
  position: relative;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<div class="container">
  <div class="inner">
    your own content
  </div>
</div>

html代码和上面一样。translat本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nete(-50%, -50%)将会将元素位移【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。自己宽度和高度的-50%。这种方法其实和【本文受版权保护】著作权归作者所有，禁止商业用途转载。最上面被否定掉的margin负值用法一样原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。，可以说是margin负值的替代方案。这【转载请注明来源】【关注微信公众号：wwwtangshuangnet】样你就非常容易理解了。这个方法最厉害的地未经授权，禁止复制转载。【原创内容，转载请注明出处】方是不需要确定.inner的宽高，而.c【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ontainer的宽高也不需要手动设置，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。如果它自己本身就被撑大的话。这里只是为了本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net演示方便，才特意给它设置了宽高。

【本文受版权保护】未经授权，禁止复制转载。【作者：唐霜】【未经授权禁止转载】

DEMO本文版权归作者所有，未经授权不得转载。

vw vh和translate原创内容，盗版必究。

vh和vw是两个比较偏的单位，是指“vi本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ewport的height和width的【本文受版权保护】【原创不易，请尊重版权】1%”，比如说50vh就是当前视口（窗口本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net的高度，实验中包含了滚动条）高度的50%【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net。也就是说vw将获得和1%差不多的win本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】dow宽度。因此用在fixed的时候更加【原创内容，转载请注明出处】【本文受版权保护】适合。

【未经授权禁止转载】【转载请注明来源】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

<style>
.inner {
   position:fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%); 
}
</style>
<div class="inner">
  this is a box fixed in center of screen
</div>

【本文首发于唐霜的博客】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】

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

vh vw只能从窗口的大小去考虑，不适合【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。正常的文本流。不过有的时候可以非常有用，【版权所有，侵权必究】【版权所有，侵权必究】特别是在做全屏应用的时候，比如full 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netpage。我把两种方案都放在了演示中，你转载请注明出处：www.tangshuang.net【未经授权禁止转载】可以在DEMO查看。

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

:before和display:inli【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netne-block

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】未经授权，禁止复制转载。

<style>
.container{
    text-align: center;
}
.container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.inner {
    display: inline-block;
}
</style>
<div class="container">
    <div class="inner">
        this is a box fixed in center of screen<br>The second line
    </div>
</div>

这个方案是比较特别一些，不是很好理解。首【本文受版权保护】【原创不易，请尊重版权】先，.container水平居中没问题。【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】接着，给.container伪类:bef【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ore设定为height:100%，这样著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。可以用一个伪元素在.container获未经授权，禁止复制转载。【版权所有，侵权必究】得与父元素等高的空间。然后用inline原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。-block和vertical-alig【转载请注明来源】【原创不易，请尊重版权】n: middle改变对齐的基线，关于这【作者：唐霜】【未经授权禁止转载】一点，我也不甚懂，这里【转载请注明来源】有一篇文章可以参考。通过:before之著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。后，.container内的行级元素的对【转载请注明来源】转载请注明出处：www.tangshuang.net齐基线就跑到居中的位置，也就实现了垂直居转载请注明出处：www.tangshuang.net【版权所有，侵权必究】中对齐。这个时候，如果里面仅一排文字，其【转载请注明来源】【本文首发于唐霜的博客】实可以不用.inner，但是上面的例子里著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net面有一个<br>，这就不一样了。如果直接把文字放在.co未经授权，禁止复制转载。【原创内容，转载请注明出处】ntainer里面，<br>著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。之前的文字会基于:before基线，会保【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】持垂直对齐的状态。但是<br>【原创内容，转载请注明出处】未经授权，禁止复制转载。;之后的文字会另起一行，这一行将起始于:【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】before的下一行，所以会在:befo【作者：唐霜】【关注微信公众号：wwwtangshuangnet】re的100%高度下面，导致被顶出.co【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ntainer。但是如果把文字放在.in【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netner里面，再让.inner为inlin【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】e-block，就可以使.inner和:【转载请注明来源】本文版权归作者所有，未经授权不得转载。before处于同一基线，这样就让整个.原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netinner处于垂直居中的状态。

DEMO【原创不易，请尊重版权】

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】

css3 flex著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。【转载请注明来源】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

css3新增了布局相关的属性，其中fle本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】x布局可以非常简单地帮我们实现我们想要的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。效果。

未经授权，禁止复制转载。【原创内容，转载请注明出处】【原创内容，转载请注明出处】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

<style>
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<div class="container">
    <div class="inner">
        this is a box fixed in center of screen<br>The second line
    </div>
</div>

简单解释一下，当原创内容，盗版必究。display: flex时，表示该容器内部的元素将按照flex进本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。行布局。align-items: center表示这些元素将相对于本容器水平居中，【未经授权禁止转载】justify-content: center也是同样的道理垂直居中。对.contai本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ner赋予了这些样式之后，作为它的内部元【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。素.inner自己自觉的居中了。而且这里【本文受版权保护】【未经授权禁止转载】你会发现，由于没有使用text-alig【本文受版权保护】【版权所有】唐霜 www.tangshuang.netn: center，.inner里面的文转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】字是不会居中的，也就是说仅仅.inner【原创不易，请尊重版权】【本文受版权保护】这个容器居中而已。

DEMO未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

总结【版权所有，侵权必究】

从上面的几种可行的方案，大致可以分为两类本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。：display对齐方案、transla【未经授权禁止转载】【版权所有，侵权必究】te位移方案。display方案是充分发【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】挥css的布局特性，利用布局和UI引擎的转载请注明出处：www.tangshuang.net原创内容，盗版必究。特性来控制布局中的对齐方式。而trans著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。late方案则是利用位移，通过先50%的本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】位移，可以是通过position，也可以转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】是通过margin vw vh，但是完成转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】之后，在通过translate把元素拉回转载请注明出处：www.tangshuang.net【作者：唐霜】去，之所以用translate而不是ma【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】rgin是因为translate是相对于转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。元素本身，而margin不是。

【未经授权禁止转载】【本文受版权保护】【作者：唐霜】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

【未经授权禁止转载】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【版权所有，侵权必究】【本文首发于唐霜的博客】【原创内容，转载请注明出处】【原创内容，转载请注明出处】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有，侵权必究】【本文受版权保护】原创内容，盗版必究。【原创内容，转载请注明出处】【本文受版权保护】【原创内容，转载请注明出处】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【作者：唐霜】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net原创内容，盗版必究。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【本文受版权保护】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】

2017-02-17 14788 CSS3

唐霜

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