zaishiyu

前言

  元素居中是日常开发和学习中最常见的问题,同时也是面试中经常考察的知识点,本文来总结一下这方面的知识点。

正文

  1、水平居中

  (1)子父元素宽度固定,子元素设置 margin:auto,并且子元素不能设置浮动,否则居中失效。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            background-color: skyblue;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            margin: auto;
        }
    </style>

  (2)子父元素宽度固定,父元素设置 text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动,否则居中失效。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            background-color: skyblue;
            text-align: center;
        }

        .inner {
            width: 200px;
            height: 100px;
            display: inline-block;
            background-color: sandybrown;
        }
    </style>

2、水平垂直居中

  (1)子父元素宽高度固定,子元素相对于父元素绝对定位(子绝父相),子元素 top,left 设置 50%,子元素 margin-top 和 margin-left 减去各自宽高的一半或者 transform :translate(-50%,-50%)。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%); */
            margin-top: -50px;
            margin-left: -100px;
        }
    </style>

  (2)子父元素宽高度固定,子元素相对于父元素绝对定位(子绝父相),使用calc达到上面效果。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 100px);

        }
    </style>

   (3)子父元素宽高度固定,子元素相对于父元素绝对定位(子绝父相),子元素上下左右全为 0,然后设置子元素margin:auto。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>

   (4)子元素相对定位,子元素 top,left 值为 50%,transform:translate(-50%,-50%)。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

   (5)文本水平垂直居中 父元素设置text-algin:center使得子元素水平居中,子元素设置line-height为父元素高度,使得子元素垂直居中。

    <div class="wrap">
        <span class="inner">321311111111111111</span>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            text-align: center;
            background-color: skyblue;
        }

        .inner {
            line-height: 200px;
            background-color: sandybrown;
        }
    </style>

  (6)利用line-height,vertical-align实现元素水平垂直居中。

    <div class="wrap">
        <div class="inner">321</div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            line-height: 200px;
            text-align: center;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            display: inline-block;/* 将子元素设置为行内块级元素 */
            vertical-align: middle;/* 垂直居中 */
            text-align: left;/* 默认继承了父元素的水平居中,这里需要修正修正文字 */
        }
    </style>

   (7)父元素设置弹性盒子,display:flex; justfy-content:center ;align-item:center。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>

   (8)父元素设置 display:table-cell vertical-align:middle,子元素设置 margin:auto。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            display: table-cell;
            vertical-align: middle
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            margin: auto;
        }
    </style>

  (9)网格布局实现水平垂直居中display: grid;place-items: center。

    <div class="wrap">
        <div class="inner"></div>
    </div>
    <style>
        .wrap {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            display: grid;
            place-items: center;
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

 

相关文章:

猜你喜欢