CSS中的垂直和水平居中完全指南

网络
在小溪的淙淙声中，饱含树脂的幼芽在开放，水下的草长出水面，岸上青草越发繁茂。雨滴从屋檐、墙头、树叶上跌下，就如同断了线的珠子一样，最后连在一起，形成水柱。
CSS Code复制内容到剪贴板
  1. .link{
  2. padding-top:30px;
  3. padding-bottom:30px;
  4. }

居中一直是CSS中被抱怨的典型。为什么实现起来这么辛苦？所以有人被嘲笑。我觉得问题不是没有办法做到，只是视情况而定，有很多不同方式，但是很难弄清楚应该用何种方式。因此我写了这篇文章，希望能把他变得容易点。
　水平居中
　　内联元素（inline or inline-*）居中?

　　你可以让他相对父级块级元素居中对齐

CSS Code复制内容到剪贴板
  1. .center-children{
  2. text-align:center;
  3. }

　　块级元素（block level）居中?

　　你可以通过设置margin-left和margin-right为auto让它居中（同时还要设置width，否则它就会承满整个容器，无法看出居中效果），如。

CSS Code复制内容到剪贴板
  1. .center-me{
  2. margin:0<spanstyle="width:auto;height:auto;float:none;"id="8_nwp"><astyle="text-decoration:none;"mpid="8"target="_blank"rel="nofollow noopener noreferrer" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f3e358418dc3f42b&k=auto&k0=auto&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=2bf4c38d4158e3f3&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5106%2Ehtml&urlid=0"id="8_nwl"><spanstyle="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">auto</span></a></span>;
  3. }

　　如果有很多块级元素呢？

　　如果你有很匀块级元素需要水平居中成一行，你最好使用一个不同的display类型。这是一个使用inline-block和flex的例子。


CSS Code复制内容到剪贴板
  1. <mainclass="inline-block-center">
  2. <div>
  3. I'manelementthatisblock-likewithmysiblingsandwe'recenteredinarow.
  4. </div>
  5. <div>
  6. I'manelementthatisblock-likewithmysiblingsandwe'recenteredinarow.Ihavemorecontentinmethanmysiblingsdo.
  7. </div>
  8. <div>
  9. I'manelementthatis<spanstyle="width:auto;height:auto;float:none;"id="6_nwp"><astyle="text-decoration:none;"mpid="6"target="_blank"rel="nofollow noopener noreferrer" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f3e358418dc3f42b&k=block&k0=block&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=2bf4c38d4158e3f3&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5106%2Ehtml&urlid=0"id="6_nwl"><spanstyle="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>-likewithmysiblingsandwe'recenteredinarow.
  10. </div>
  11. </main>
  13. <mainclass="flex-center">
  14. <div>
  15. I'manelementthatisblock-likewithmysiblingsandwe'recenteredinarow.
  16. </div>
  17. <div>
  18. I'manelementthatisblock-likewithmysiblingsandwe'recenteredinarow.Ihavemorecontentinmethanmysiblingsdo.
  19. </div>
  20. <div>
  21. I'manelementthatisblock-likewithmysiblingsandwe'recenteredinarow.
  22. </div>
  23. </main>
  25. body{
  26. background:#f06d06;
  27. font-size:80%;
  28. }
  29. main{
  30. background:white;
  31. margin:20px0;
  32. padding:10px;
  33. }
  34. maindiv{
  35. background:black;
  36. color:white;
  37. padding:15px;
  38. max-width:125px;
  39. margin:5px;
  40. }
  41. .inline-<spanstyle="width:auto;height:auto;float:none;"id="5_nwp"><astyle="text-decoration:none;"mpid="5"target="_blank"rel="nofollow noopener noreferrer" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f3e358418dc3f42b&k=block&k0=block&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=2bf4c38d4158e3f3&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5106%2Ehtml&urlid=0"id="5_nwl"><spanstyle="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>-center{
  42. text-align:center;
  43. }
  44. .inline-block-centerdiv{
  45. display:inline-block;
  46. text-align:left;
  47. }
  48. .flex-center{
  49. display:flex;
  50. justify-content:center;
  51. }

　垂直居中
　　垂直居中在CSS中有点棘手

　　内联元素（inline or inline-*）居中，像文本和链接那样的？
　　它是一行的吗？

　　有时侯元素可以表现像垂直居中，只是因为它们有相等的上下padding

　　如果padding因为某些原因不能用，而且文本不会换行的情况下，你可以使用line-height，让其与height相等去对齐文本。

CSS Code复制内容到剪贴板
  1. .center-text-trick{
  2. height:100px;
  3. line-height:100px;
  4. whitewhite-space:nowrap;
  5. }

　　它是多行的？

　　上下等padding的方式也可以让多行居中，但是如果这方法没用，你可以让这些文字的容器按table cell模式显示，然后设置文字的vertical-align属性对齐，就像talbe那样


CSS Code复制内容到剪贴板
  1. <table>
  2. <tr>
  3. <td>
  4. I'mverticallycenteredmultiplelinesoftextinarealtablecell.
  5. </td>
  6. </tr>
  7. </table>
  8. <divclass="center-table">
  9. <p>I'mverticallycenteredmultiplelinesoftextinaCSS-createdtable<spanstyle="width:auto;height:auto;float:none;"id="4_nwp"><astyle="text-decoration:none;"mpid="4"target="_blank"rel="nofollow noopener noreferrer" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f3e358418dc3f42b&k=layout&k0=layout&kdi0=0&luki=1&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=2bf4c38d4158e3f3&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5106%2Ehtml&urlid=0"id="4_nwl"><spanstyle="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">layout</span></a></span>.</p>
  10. </div>
  12. body{
  13. background:#f06d06;
  14. font-size:80%;
  15. }
  16. table{
  17. background:white;
  18. width:240px;
  19. border-collapse:separate;
  20. margin:20px;
  21. height:250px;
  22. }
  23. tabletd{
  24. background:black;
  25. color:white;
  26. padding:20px;
  27. border:10pxsolidwhite;
  28. /*defaultisvertical-align:middle;*/
  29. }
  30. .center-table{
  31. display:table;
  32. height:250px;
  33. background:white;
  34. width:240px;
  35. margin:20px;
  36. }
  37. .center-tablep{
  38. display:table-cell;
  39. margin:0;
  40. background:black;
  41. color:white;
  42. padding:20px;
  43. border:10pxsolidwhite;
  44. vertical-align:middle;
  45. }

　　块级元素（block level）垂直居中?

　　你知道元素的高度吗？

　　出于很多方面的原因，不知道网页布局的高度是相当普遍的。

　　但是如果你的布局有一个固定高度，你就可以这样垂直居中：

CSS Code复制内容到剪贴板
  1. .parent{
  2. position:relative;
  3. }
  4. .child{
  5. position:absolute;
  6. top:50%;
  7. height:100px;
  8. margin-top:-50px;/*如果没有使用:border-box;的盒子模型则需要设置这个*/
  9. }

　　元素的高度是未知的

　　尽管未知，但你仍有可能向上推移50%的宽度


CSS Code复制内容到剪贴板
  1. .parent{
  2. position:relative;
  3. }
  4. .child{
  5. position:absolute;
  6. top:50%;
  7. transform:translateY(-50%);
  8. }

　　你可以使用flexbox吗？

　　这并不奇怪，使用flexbox会容易非常多

CSS Code复制内容到剪贴板
  1. <main>
  2. <div>
  3. I'ma<spanstyle="width:auto;height:auto;float:none;"id="2_nwp"><astyle="text-decoration:none;"mpid="2"target="_blank"rel="nofollow noopener noreferrer" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f3e358418dc3f42b&k=block&k0=block&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=2bf4c38d4158e3f3&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5106%2Ehtml&urlid=0"id="2_nwl"><spanstyle="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>-levelelementwithanunknownheight,centeredverticallywithinmyparent.
  4. </div>
  5. </main>
  7. body{
  8. background:#f06d06;
  9. font-size:80%;
  10. }
  11. main{
  12. background:white;
  13. height:300px;
  14. width:200px;
  15. padding:20px;
  16. margin:20px;
  17. display:flex;
  18. flex-direction:column;
  19. justify-content:center;
  20. resize:vertical;
  21. overflow:<spanstyle="width:auto;height:auto;float:none;"id="1_nwp"><astyle="text-decoration:none;"mpid="1"target="_blank"rel="nofollow noopener noreferrer" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f3e358418dc3f42b&k=auto&k0=auto&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=2bf4c38d4158e3f3&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5106%2Ehtml&urlid=0"id="1_nwl"><spanstyle="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">auto</span></a></span>;
  22. }
  23. maindiv{
  24. background:black;
  25. color:white;
  26. padding:20px;
  27. resize:vertical;
  28. overflow:auto;
  29. }

　同时水平和垂直居中
　　元素有固定的宽度和高度

　　如果元素的宽度和高度是固定的，你需要先绝对居中，然后上移和左移50%的宽度即可，这种方案有极好的跨浏览器支持。

CSS Code复制内容到剪贴板
  1. .parent{
  2. position:relative;
  3. }
  5. .child{
  6. width:300px;
  7. height:100px;
  8. padding:20px;
  9. position:absolute;
  10. top:50%;
  11. left:50%;
  12. margin:-70px00-170px;
  13. }

　　元素的宽度高度未知

　　如果你不知道高度和宽度（可变的），你可以使用transofrm属性在两个方向都平移负50%

CSS Code复制内容到剪贴板
  1. .parent{
  2. position:relative;
  3. }
  5. .child{
  6. position:absolute;
  7. top:50%;
  8. left:50%;
  9. transform:translate(-50%,-50%);
  10. }

以上就是CSS中的垂直和水平居中完全指南。睡觉也是一种解脱，睡着了就会不悲、不气、不烦恼、不孤单，是上天赐予你短暂失忆的时间。更多关于CSS中的垂直和水平居中完全指南请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例
CSS浮动引起的高度塌陷问题