在开发中经常遇到这个问题，即让某个元素的【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。内容在水平和垂直方向上都居中，内容不仅限【原创内容，转载请注明出处】原创内容，盗版必究。于文字，可能是图片或其他元素。而且我们希转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】望不要涉及宽度和高度，也就是说，我们不知【本文首发于唐霜的博客】【原创不易，请尊重版权】道父元素的宽高，也不知道内容元素的宽高。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】这篇文章就来总结一下都有哪些方法可以实现【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】水平和垂直都居中。
转载请注明出处：www.tangshuang.net【作者：唐霜】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。不适合的方案【转载请注明来源】
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。text-align和line-heig本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netht
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【作者：唐霜】显然，使用text-align和line【本文受版权保护】本文版权归作者所有，未经授权不得转载。-height的方式更适合单排文字，而不【作者：唐霜】著作权归作者所有，禁止商业用途转载。适合本文的需求。特别是line-heig本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ht，无法保证在不知道高度的情况下还能垂著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net直居中。而且就算是文字，我们也不知道文字未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】有多少行。
【转载请注明来源】转载请注明出处：www.tangshuang.net原创内容，盗版必究。【转载请注明来源】position:absolute、50本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】%和margin:-px
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【原创内容，转载请注明出处】绝大多数情况下，我们可以考虑这种方案，让转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。想要居中的元素通过定位和margin为负转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】值进行偏移的方法让它在垂直方向上居中。这原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。种方案不要求父元素的高度，也就是即使父元【原创内容，转载请注明出处】【本文首发于唐霜的博客】素的高度变化了，仍然可以保持在父元素的垂【版权所有，侵权必究】【版权所有，侵权必究】直居中位置，水平方向上是一样的操作。但是【未经授权禁止转载】【本文受版权保护】这里有一个问题，就是我们的需求往往是内部【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。的这个元素的宽度高度也不确定，比如是一段【本文首发于唐霜的博客】【原创不易，请尊重版权】文字，你无法保证这段文字的字数多少，所以【转载请注明来源】【版权所有】唐霜 www.tangshuang.net通过margin为负值来偏移在这种情况下转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。行不通。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】position:fixed、0和mar转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。gin:auto
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。当我们要制作一个modal dialog本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。弹出框时，比如弹出居中于屏幕的广告或登录【作者：唐霜】【版权所有】唐霜 www.tangshuang.net框。这个时候可以考虑一些相对于窗口或网页【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net居中的方案。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 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>
这里面最重要的是【关注微信公众号：wwwtangshuangnet】margin: auto;，对于块级元素而言，确定了自己的宽度之后【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】，margin:auto可以帮助它居中，【原创内容，转载请注明出处】【作者：唐霜】即使在position:fixed时。不【原创内容，转载请注明出处】【原创内容，转载请注明出处】过必须规定要居中的元素的宽高度，无法满足【本文受版权保护】【版权所有，侵权必究】我们的需求。
position:absolute、0和【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】margin:auto
【本文受版权保护】【本文受版权保护】【原创不易，请尊重版权】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net上面的fixed方案只适合在整个窗口实现【本文受版权保护】本文作者：唐霜，转载请注明出处。居中。fixed会使元素脱离网页，因此在【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net内容流中还是不适用。在内容流中也想实现居著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。中，可以如下：
【原创不易，请尊重版权】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】<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转载请注明出处：www.tangshuang.net【本文受版权保护】:auto，只不过使用absolute。未经授权，禁止复制转载。【作者：唐霜】使用absolute定位的话，父级元素必原创内容，盗版必究。【未经授权禁止转载】须也具有position（不为stati本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。c）。所以把.inner放在一个有pos【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。ition的父级元素.container转载请注明出处：www.tangshuang.net【未经授权禁止转载】。这样.inner相对于.contain【作者：唐霜】本文作者：唐霜，转载请注明出处。er就是居中的（前提还是.inner要有【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net宽高）。接下来的问题就是怎样让.cont本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ainer具备和内容相同的高宽，通过.c本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ontainer的父级元素为positi【本文受版权保护】著作权归作者所有，禁止商业用途转载。on:relative，.contain本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】er为absolute，再使用100%使【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。.container和父级元素宽高相同即【原创不易，请尊重版权】【本文受版权保护】可。同理因为要设定宽高，所以不满足我们的【原创内容，转载请注明出处】未经授权，禁止复制转载。需求。
【转载请注明来源】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。正确的方案【转载请注明来源】
未经授权，禁止复制转载。【本文首发于唐霜的博客】【转载请注明来源】display:table和diapla【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.nety:table-cell
【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】这个方案是理解上最容易的，因为table本文版权归作者所有，未经授权不得转载。【作者：唐霜】具备垂直居中的属性，所以很容易通过属性就著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。能实现。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。<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 获取更多精彩内容】er的宽高，当内部的内容仍然保持居中状态【原创不易，请尊重版权】【未经授权禁止转载】。
【转载请注明来源】转载请注明出处：www.tangshuang.net
DEMO原创内容，盗版必究。
position:absolute、50本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】%和translate
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。在css3里面提供了translate函本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net数，它的主要作用是位移，传给transf【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。orm属性。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。<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负值的替代方案。这本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。样你就非常容易理解了。这个方法最厉害的地【本文受版权保护】【原创内容，转载请注明出处】方是不需要确定.inner的宽高，而.c本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】ontainer的宽高也不需要手动设置，【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】如果它自己本身就被撑大的话。这里只是为了原创内容，盗版必究。【转载请注明来源】演示方便，才特意给它设置了宽高。
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。DEMO转载请注明出处：www.tangshuang.net
著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创不易，请尊重版权】vw vh和translate著作权归作者所有，禁止商业用途转载。
【版权所有，侵权必究】【作者：唐霜】本文版权归作者所有，未经授权不得转载。vh和vw是两个比较偏的单位，是指“vi【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netewport的height和width的未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。1%”，比如说50vh就是当前视口（窗口未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net的高度，实验中包含了滚动条）高度的50%【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。。也就是说vw将获得和1%差不多的win本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】dow宽度。因此用在fixed的时候更加【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】适合。
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net<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>
其实和使用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只能从窗口的大小去考虑，不适合【版权所有，侵权必究】【原创不易，请尊重版权】正常的文本流。不过有的时候可以非常有用，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】特别是在做全屏应用的时候，比如full 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。page。我把两种方案都放在了演示中，你著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】可以在DEMO查看。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【版权所有，侵权必究】未经授权，禁止复制转载。:before和display:inli【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ne-block
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】这也是一种处理方式，通过伪类:befor【转载请注明来源】原创内容，盗版必究。e在元素内增加新元素后在用display【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net:inline-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【原创不易，请尊重版权】【未经授权禁止转载】ore设定为height:100%，这样【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net可以用一个伪元素在.container获本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】得与父元素等高的空间。然后用inline【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net-block和vertical-alig【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。n: middle改变对齐的基线，关于这转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。一点，我也不甚懂，这里【未经授权禁止转载】有一篇文章可以参考。通过:before之本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】后，.container内的行级元素的对未经授权，禁止复制转载。【原创不易，请尊重版权】齐基线就跑到居中的位置，也就实现了垂直居未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。中对齐。这个时候，如果里面仅一排文字，其著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net实可以不用.inner，但是上面的例子里未经授权，禁止复制转载。【原创不易，请尊重版权】面有一个<br>，这就不一样了。如果直接把文字放在.co【作者：唐霜】【原创不易，请尊重版权】ntainer里面，<br>【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】之前的文字会基于:before基线，会保本文作者：唐霜，转载请注明出处。原创内容，盗版必究。持垂直对齐的状态。但是<br>【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。;之后的文字会另起一行，这一行将起始于:原创内容，盗版必究。【原创不易，请尊重版权】before的下一行，所以会在:befo【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。re的100%高度下面，导致被顶出.co【本文受版权保护】本文作者：唐霜，转载请注明出处。ntainer。但是如果把文字放在.in未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ner里面，再让.inner为inlin本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】e-block，就可以使.inner和:【作者：唐霜】【版权所有，侵权必究】before处于同一基线，这样就让整个.【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。inner处于垂直居中的状态。
DEMO【关注微信公众号：wwwtangshuangnet】
【版权所有，侵权必究】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netcss3 flex转载请注明出处：www.tangshuang.net
【作者：唐霜】转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】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>
简单解释一下，当转载请注明出处：www.tangshuang.netdisplay: flex时，表示该容器内部的元素将按照flex进本文版权归作者所有，未经授权不得转载。【转载请注明来源】行布局。align-items: center表示这些元素将相对于本容器水平居中，【本文受版权保护】justify-content: center也是同样的道理垂直居中。对.contai【本文受版权保护】本文作者：唐霜，转载请注明出处。ner赋予了这些样式之后，作为它的内部元【作者：唐霜】【原创不易，请尊重版权】素.inner自己自觉的居中了。而且这里【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】你会发现，由于没有使用text-alig原创内容，盗版必究。未经授权，禁止复制转载。n: center，.inner里面的文本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】字是不会居中的，也就是说仅仅.inner【本文受版权保护】本文作者：唐霜，转载请注明出处。这个容器居中而已。
总结【关注微信公众号：wwwtangshuangnet】
未经授权，禁止复制转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。从上面的几种可行的方案，大致可以分为两类【转载请注明来源】【关注微信公众号：wwwtangshuangnet】：display对齐方案、transla本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.nette位移方案。display方案是充分发本文作者：唐霜，转载请注明出处。【未经授权禁止转载】挥css的布局特性，利用布局和UI引擎的【版权所有】唐霜 www.tangshuang.net【本文受版权保护】特性来控制布局中的对齐方式。而trans转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。late方案则是利用位移，通过先50%的本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。位移，可以是通过position，也可以【本文受版权保护】本文作者：唐霜，转载请注明出处。是通过margin vw vh，但是完成【本文受版权保护】【版权所有】唐霜 www.tangshuang.net之后，在通过translate把元素拉回本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net去，之所以用translate而不是ma【本文受版权保护】【版权所有，侵权必究】rgin是因为translate是相对于【转载请注明来源】【作者：唐霜】元素本身，而margin不是。
未经授权，禁止复制转载。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】2017-02-17 14791 CSS3
