美文网首页
CSS垂直居中方法总结

CSS垂直居中方法总结

作者: 行走的巨蟹 | 来源:发表于2018-10-13 19:31 被阅读0次

    在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐

    可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现。这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用。

    以前遇到这种场景,其实挺头疼的,我是直接给小图标设置相对定位,然后调整top值。好像找不到更好的办法,也就没去管了。

    直到后来偶然看了张鑫旭大神关于vertical-align属性的视频讲解,感觉发现了新大陆。

    下面总结了2种方法,只需要一句代码即可解决(强烈推荐第二种)

    ①:给小图标加上 vertical-align:middle;

    以前因为IE6,7对该属性不支持,所以还要使用csshack,现在主流浏览器都已经很好的支持了,而且谁还管万恶的低版本IE浏览器兼容喔(eat shift)

    ②:给小图标加上 vertical-align:-2px;(这里的负值根据你的情况自行设置,这种方法没有兼容性问题)

    注:当你遇到第一种方法用了没有效果或者用着很不爽的时候,推荐使用第二种方法

    顺便总结了一些其它小技巧,害怕自己以后忘记,也希望帮到有需要的小伙伴

    问题1:怎么让定位元素垂直居中的三种方法?

    <!DOCTYPE html>
    <html>
      <head>
          <meta charset="UTF-8">
          <title>定位元素居中</title>
          <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
      </head>
      <style type="text/css">
      .div{
          width: 500px;
          height: 300px;
          background-color: red;
          position: absolute;
          left: 50%;
          top:50%;
          margin: -150px 0px 0px -250px;
      }
      </style>
      <body>
              <div class="div"></div>
      </body>
    </html>
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .div01 {
                    width:200px;
                    height:200px;
                    background-color:#6699FF;
                    position:absolute;
                    top:50%;
                    left:50%;
                    margin-top: -100px;
                    margin-left: -100px;
                }
            </style>
        </head>
        <body>
                <div class="div01"></div>
        </body>
    </html>
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .div01 {
                    width:200px;
                    height:200px;
                    background-color:#6699FF;
                    position:absolute;
                    margin: auto;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                }
            </style>
        </head>
        <body>
                <div class="div01"></div>
        </body>
    </html>
    

    注: 上面三种方法都是在知道具体宽高的情况下,如果不知道具体宽高,怎么让其垂直居中呢?(利用transform属性)

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style type="text/css">
            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    
        <body>
            <img src="img/1.jpg" />
        </body>
    
    </html>
    

    问题2:怎么让文字垂直居中?(给一个空标签,然后给空标签设置display:inline-block;height:100%;width:1px;vertical-align:middle;)

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>文字垂直居中</title>
            <style type="text/css">
                .test {
                    width: 500px;
                    padding: 10px;
                    border: 1px solid red;
                    text-align: center;
                }
                
                .test div {
                    display: inline-block;
                    padding: 3px;
                    width: 200px;
                    border: 1px solid #CCCCCC;
                }
                
                .test span {
                    display: inline-block;
                    height: 100%;
                    width: 1px;
                    vertical-align: middle;
                }
            </style>
        </head>
    
        <body>
            <!--用一个高度100% 宽1px display: inline-block 的空标签 然后使用vertical-align: middle; 就可以在高度不固定的情况下 自动居中-->
    
            <div class="test">
                <div>
                    青青园中葵,朝露待日晞。 阳春布德泽,万物生光辉。 常恐秋节至,焜黄华叶衰。 百川东到海,何时复西归? 少壮不努力,老大徒伤悲。青青园中葵,朝露待日晞。 阳春布德泽,万物生光辉。 常恐秋节至,焜黄华叶衰。 百川东到海,何时复西归? 少壮不努力,老大徒伤悲。
                </div>
                <span></span>
            </div>
    
        </body>
    
    </html>
    
    

    问题3:怎么让一个块元素水平居中,块元素里的文字也水平居中?
    给这个块元素设置一个固定宽度,然后加上margin:0 auto;
    在给里面的元素设置text-align:center;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .main {
                    width: 400px;
                    margin: 0 auto;
                    background-color: chocolate;
                }
                .main p {
                    color: #fff;
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <div class="main">
                <p>珍爱生命,远离IE</p>            
            </div>
        </body>
    </html>
    

    补充:最简单的实现左边定宽,右边自适应布局的方法
    给左边设置固定宽度,然后加浮动;右边设置宽度百分百,不加浮动

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                * {
                    padding: 0;
                    margin: 0;
                    color: #fff;
                    font-size: 30px;
                    font-weight: bold;
                    text-align: center;
                    box-sizing: border-box;
                }
                
                aside {
                    float: left;
                    width: 200px;
                    height: 200px;
                    line-height: 200px;
                    background: #5A6A94;
                }
                
                section {
                    width: 100%;
                    height: 200px;
                    line-height: 200px;
                    background: #BE4F4F;
                }
            </style>
        </head>
    
        <body>
            <!-- 左边定宽 -->
            <aside class="left">Left</aside>
            <!-- 右边自适应 -->
            <section class="right">Right</section>
        </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:CSS垂直居中方法总结

          本文链接:https://www.haomeiwen.com/subject/crniaftx.html