css垂直居中方法总结

时间 2019-11-08

标签 css 垂直居中方法总结栏目 CSS 繁體版

原文原文链接

　　在网页布局中，咱们每每会遇到下图所示的场景，让小图标和文字对齐javascript

　　可能有的小伙伴会说，这个简单，直接给小图标设置左浮动来实现。css

　　这样作是能够的，但不推荐，毕竟浮动是会影响布局的，能少用仍是少用。html

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

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

　　下面总结了2种方法，只须要一句代码便可解决（强烈推荐第二种）浏览器

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

　　之前由于IE6,7对该属性不支持，因此还要使用csshack，ide

　　如今主流浏览器都已经很好的支持了，并且谁还管万恶的低版本IE浏览器兼容喔（eat shift）布局

　　②：给小图标加上　vertical-align:-2px;（这里的负值根据你的状况自行设置，这种方法没有兼容性问题）spa

　　注：若是当你遇到第一种方法用了没有效果或者用着很不开心的时候，强烈推荐使用第二种方法

　　顺便总结了一些其它小技巧，惧怕本身之后忘记，也但愿帮到有须要的小伙伴

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

<!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>

<!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>
        <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>

　　注：上面三种都是在知道具体宽高的状况下，若是不知道元素宽高怎么让其垂直居中呢？（利用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>