资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

CSS中实现垂直和水平居中的教程

本篇内容介绍了“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 auto;   

  3. }   

如果有很多块级元素呢？

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

 

CSS Code复制内容到剪贴板

  1.   

  2.   

      

  3.     I'm an element that is block-like with my siblings and we're centered in a row.   

  4.   

  

  •   

      

  •     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.   

  •   

    •   

  •   

      

  •     I'm an element that is block-like with my siblings and we're centered in a row.   

  •   

    •   

  •   

  •     

  •   

  •   

      

  •     I'm an element that is block-like with my siblings and we're centered in a row.   

  •      

  •   

      

  •     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.   

  •      

  •   

      

  •     I'm an element that is block-like with my siblings and we're centered in a row.   

  •      

  •   

  •     

  • body {   

  •   background: #f06d06;   

  •   font-size: 80%;   

  • }   

  • main {   

  •   background: white;   

  •   margin: 20px 0;   

  •   padding: 10px;   

  • }   

  • main div {   

  •   background: black;   

  •   color: white;   

  •   padding: 15px;   

  •   max-width: 125px;   

  •   margin: 5px;   

  • }   

  • .inline-block-center {   

  •   text-align: center;   

  • }   

  • .inline-block-center div {   

  •   display: inline-block;   

  •   text-align: left;   

  • }   

  • .flex-center {   

  •   display: flex;   

  •   justify-content: center;   

  • }  

    • 　垂直居中
    　　垂直居中在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.   

    2.   

      3.   

    3.     

      4.  

    4.   

      5.  

      6.   

    6.       I'm vertically centered multiple lines of text in a real table cell. 

    7.     

      8.  

    8.  

    9.   

      I'm vertically centered multiple lines of text in a CSS-created table layout.

        

    10.   

    11.     

    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. table td {   

    24.   background: black;   

    25.   color: white;   

    26.   padding: 20px;   

    27.   border: 10px solid white;   

    28.   /* default is vertical-align: middle; */  

    29. }   

    30. .center-table {   

    31.   display: table;   

    32.   height: 250px;   

    33.   background: white;   

    34.   width: 240px;   

    35.   margin: 20px;   

    36. }   

    37. .center-table p {   

    38.   display: table-cell;   

    39.   margin: 0;   

    40.   background: black;   

    41.   color: white;   

    42.   padding: 20px;   

    43.   border: 10px solid white;   

    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.      

    2.   

        

    3.      I'm a block-level element with an unknown height, centered vertically within my parent.   

    4.        

    5.   

    6.     

    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: auto;   

    22. }   

    23. main div {   

    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. }   

    4.     

    5. .child {   

    6.   width: 300px;   

    7.   height: 100px;   

    8.   padding: 20px;   

    9.   position: absolute;   

    10.   top: 50%;   

    11.   left: 50%;   

    12.   margin: -70px 0 0 -170px;   

    13. }  

    　　元素的宽度高度未知

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

    CSS Code复制内容到剪贴板

    1. .parent {   

    2.   position: relative;   

    3. }   

    4.     

    5. .child {   

    6.   position: absolute;   

    7.   top: 50%;   

    8.   left: 50%;   

    9.   transform: translate(-50%, -50%);   

    10. }  

    “CSS中实现垂直和水平居中的教程”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    网页名称：CSS中实现垂直和水平居中的教程
    网站地址：http://cdkjz.cn/article/jiiops.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    免备案虚拟主机SSL证书重庆建站服务器托管橡塑保温管品牌网站定制成都门窗定制工业净化空调成都小程序开发公司四川成都托管服务器

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图