宜宾网站建设公司

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://ybzwz.com/article/jiiops.html

    其他资讯