CSS常见居中方法大团圆

作者: 崔小叨 | 来源:发表于2017-01-22 15:26 被阅读177次
    Markdown

    还有几天就是农历新年了,于我们而言这是个举国欢庆、阖家团员的大日子。提前祝各位朋友新年快乐,家人健康。
    言归正传,借这个机会抽时间总结了一下css中常见的居中方法,也让它们沾沾喜气团圆一下。
    css元素的居中可以分为三类:水平居中,垂直剧中,水平&垂直居中。其中行内元素、宽高固定的块元素、宽高不固定的块元素居中方法又各有千秋,接下来分门别类为大家一一道来。

    1 水平居中

    1.1 行内元素居中

    对象:
    行内元素(text、img、button等);
    display为inline-bloc的非浮动块元素;
    方法:
    父元素设置text-align:center;

    1.2 单个块元素(固定宽度)居中

    方法:
    为元素设置margin:0 auto即可;

    1.3 多个块元素(宽度固定)水平排列居中

    Markdown
    方法1:
    要居中的块元素设置display:inline-block变为行内块元素(不能用flaot),然后给其父元素设置text-align:center即可。
    请看代码示例:
    <style>
        ul,li {    list-style: none;    }
    
        ul {
            height: 200px;
            background-color: #C3BED4;
            /*实现居中*/
            text-align: center;
        }
        li {
            width: 100px;
            height: 100px;
            background-color: #EEEEFF;
            margin: 10px;
            /*变为行内块元素,记住要去掉浮动。*/
            display: inline-block;
        }
    </style>
    <body>
        <ul>
            <li>我的数量不确定,但都会居中显示。</li>
            <li>我的数量不确定,但都会居中显示。</li>
        </ul>
    </body>
    
    

    方法2(flex):
    要居中的父元素设置display:flex和justify-content:center即可。
    代码示例:

    <style>
        ul,li {    list-style: none;    }
    
        ul {
            height: 200px;
            background-color: #C3BED4;
            /*父元素变为flex弹性盒子实现内部子元素水平居中。*/
            display: flex;
            justify-content: center;
        }
        li {
            width: 100px;
            height: 100px;
            background-color: #EEEEFF;
            margin: 10px;
            float: left;
        }
    </style>
    <body>
        <ul>
            <li>我的数量不确定,但都会居中显示。</li>
            <li>我的数量不确定,但都会居中显示。</li>
        </ul>
    </body>
    
    

    1.4 块元素(宽度不固定)居中

    Markdown
    方法1:
    要居中的元素设置display:table,再设置margin:auto。
    原理:
    利用table元素有宽度自适应的特性,即不定义其宽度也不默认父元素body的宽度(table其宽度根据其内文本宽度决定)。因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
    代码示例:
    <style>
        .father {
            border: 1px solid #376956;
            overflow: hidden;
            /*下面两个组合实现没有宽度的块元素水平居中。*/
            margin: 0 auto;
            display: table;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: #c3bed4;
            float: left;
            margin: 10px;
        }
    </style>
    <body>
        <div class="father">
            <div class="son">我的数量不确定,意味着父元素不能设置固定宽度。</div>
            <div class="son">我的数量不确定,意味着父元素不能设置固定宽度。</div>
        </div>
    </body>
    
    

    方法2:
    给要居中的块元素设置display:inline-block,再给其父元素设置text-align:center。原理:
    没有宽度的块元素设置display:inline-block之后,其失去流体特性,宽度会由内在子元素撑开;然后将其视为行内元素的水平居中即可。
    补充:
    如果需要居中的元素是由数量不确定的文字撑开宽度的话,也可以给其设置display:inline;但如果是需要块元素撑开宽度的话,设置这个属性会失效,因为行内元素没有宽高属性,必须设置display:inline-block。所以这样看来,使用这个方法设置为display:inline-block更全面。
    代码示例:

    <style>
        .outer {
            width: 100%;
            /*实现内在行内元素水平居中*/
            text-align: center;
        }
        .father {
            border: 1px solid #376956;
            overflow: hidden;
            /*变为行内元素*/
            display: inline-block;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: #c3bed4;
            float: left;
            margin: 10px;
        }
    </style>
    <body>
        <div class="outer">
            <div class="father">
                <div class="son">我的数量不确定,意味着父元素不能设置固定宽度。</div>
                <div class="son">我的数量不确定,意味着父元素不能设置固定宽度。</div>
            </div>
        </div>
    </body>
    
    

    方法3:
    要居中的元素加一个包裹层,设置float:left和position:relative、left:50%;然后要居中的元素设置position:relative、left:-50%即可。
    补充:
    设置为绝对定位也可以。
    代码示例:

    <style>
        .outer {
            /*设置这个之后,就会失去流体特性,然后把子元素包裹起来*/
            float: left;
            /*父元素相对定位向右偏移50%*/
            position: relative;
            left: 50%;
        }
        .father {
            border: 1px solid #376956;
            overflow: hidden;
            /*本身相对定位,然后相对父元素向左偏移50%*/
            position: relative;
            left: -50%;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: #c3bed4;
            float: left;
            margin: 10px;
        }
    </style>
    <body>
        <div class="outer">
            <div class="father">
            <div class="son">我的数量不确定,意味着父元素不能设置固定宽度。</div>
            <div class="son">我的数量不确定,意味着父元素不能设置固定宽度。</div>
        </div>
    </body>
    
    

    2 垂直居中

    2.1 单行文本(父元素高度确定)

    方法:
    设置父元素的line-height = height即可。

    2.2 多行文本(父元素高度确定)

    Markdown
    方法1:
    块级元素(包含文本的父元素)设置display:table-cell,再设置vertical-aligh:middle即可。
    代码示例:
    <style>
        ul {
            height: 200px;
            background-color: #C3BED4;
            /*实现多行文本垂直居中*/
            display: table-cell;
            vertical-align: middle;
        }
    </style>
    <body>
        <ul>
            <li>我可以增加,只要不超过父元素的高度,都会垂直居中。</li>
            <li>我可以增加,只要不超过父元素的高度,都会垂直居中。</li>
        </ul>
    </body>
    
    

    方法2(flex):
    要居中元素的父元素设置display:flex、flex-direction:column和justify-content:center,变为弹性盒子,然后改变主轴方向再居中即可。
    代码示例:

    <style>
        ul {
            height: 200px;
            background-color: #C3BED4;
            /*变为flex弹性盒子,实现多行文本垂直居中*/
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
    <body>
        <ul>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco
        </ul>
    </body>
    
    

    2.3 块元素(高度确定)

    Markdown

    方法:
    要居中元素的父元素设置相对定位;自己设置绝对定位,top:50%(向下的位移是父元素高度的一半),margin设为自身高度一半的负值即可。。
    代码示例:

    <style>
        * {margin: 0;padding: 0;}
        ul,li{list-style:none;}
        ul {
            height: 200px;
            background-color: #C3BED4;
    
            position: relative;
        }
        li {
            height: 50px;
            background-color: #eeeeff;
            /*下面三行实现居中*/
            position: absolute;
            /*上的位移为父元素高度的一半。*/
            top: 50%;
            /*自己高度的一半。*/
            margin-top: -25px;
        }
    </style>
    <body>
        <ul>我是父元素
            <li>我是高度确定、需要垂直居中的块元素。
            </li>
        </ul>
    </body>
    
    

    2.4 块元素(高度不确定)

    Markdown
    方法1(transform):
    要居中元素的父元素设置相对定位;自己设置绝对定位,top:50%(向下的位移是父元素高度的一半),transform:translateY(-50%)即可。
    代码示例:
    <style>
        * {margin: 0;padding: 0;}
        ul,li{list-style:none;}
    
        ul {
            height: 200px;
            background-color: #C3BED4;
    
            position: relative;
        }
        li {
            background-color: #eeeeff;
    
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
    <body>
        <ul>
            <li>我是高度不确定、需要垂直居中的块元素。
            </li>
        </ul>
    </body>
    
    

    方法2(flex):
    使父元素变为弹性盒子。父元素设置display:flex、flex-direction:column和justify-content:center,即可。
    代码示例:

    <style>
        * {margin: 0;padding: 0;}
        ul,li{list-style:none;}
    
        ul {
            height: 200px;
            background-color: #C3BED4;
            /*父元素变为弹性盒子,实现垂直居中。*/
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        li {
            background-color: #eeeeff;
        }
    </style>
    <body>
        <ul>
            <li>我是高度不确定、需要垂直居中的块元素。
            </li>
        </ul>
    </body>
    
    

    3 水平且垂直居中

    3.1 块元素(宽高固定)

    Markdown
    方法1:
    父元素设置相对定位;要居中的元素绝对定位,top和left值均为50%,然后margin值设为自身宽高一半的负值即可。
    方法2:
    父元素设置相对定位;要居中的元素绝对定位,四个方向的位移均设置为0,再margin:auto即可。
    代码示例:
    <style>
        * {margin: 0;padding: 0;}
        ul,li{list-style:none;}
    
        ul {
            height: 200px;
            background-color: #C3BED4;
    
            position: relative;
        }
        li {
            background-color: #eeeeff;
            width: 100px;
            height: 100px;
            /*实现绝对定位,重点是margin的应用。*/
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <body>
        <ul>
            <li>
            </li>
        </ul>
    </body>
    
    

    3.2 块元素(宽高不固定 )

    Markdown
    方法1(transform):
    父元素设为相对定位;要居中的元素绝对定位,top和left值均设为50%,再设置transform:translate(-50%,-50%)即可。
    补充:
    使用 transform 有一个缺陷,就是当计算结果含有小数时(比如 0.5),会让整个元素看起来是模糊的,一种解决方案就是为父级元素设置 transform-style: preserve-3d。
    代码示例:
    <style>
        * {margin: 0;padding: 0;}
        ul,li{list-style:none;}
    
        ul {
            height: 200px;
            background-color: #C3BED4;
    
            position: relative;
        }
        li {
            background-color: #eeeeff;
            /*实现水平&垂直居中*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
    <body>
        <ul>
            <li>我是宽高不确定、需要水平垂直同时居中的块元素。
            </li>
        </ul>
    </body>
    
    

    方法2(flex):
    要居中元素的父元素设置display:flex和justify-content:center和aligh-items:center即可。
    代码示例:

    <style>
        * {margin: 0;padding: 0;}
        ul,li{list-style:none;}
    
        ul {
            height: 200px;
            background-color: #C3BED4;
            /*父元素变为弹性盒子,实现垂直&水平居中。*/
            display: flex;
            justify-content: center;
            align-items: center;
        }
        li {
            background-color: #eeeeff;
        }
    </style>
    <body>
        <ul>
            <li>我是宽高不确定、需要水平垂直同时居中的块元素。
            </li>
        </ul>
    </body>
    
    

    结语

    文章整理于自己的学习笔记,多为个人理解,仅供参考;如有真知灼见,欢迎交流。

    文章始发于http://www.lipengcheng.xyz 如需转载,请注明出处,谢谢。

    相关文章

      网友评论

      • azothaw:还有left加margin left加transfrom

      本文标题:CSS常见居中方法大团圆

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