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


