CSS水平垂直居中的九种方式

居中元素宽高已知

(一)absolute + margin

    <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: crimson;
            position: absolute;
            /* 第一种 */
            left: 50%;
            top: 50%;
            /* 往左和上移自身长度的一半,就为-50px */
            margin-left: -50px;
            margin-top: -50px;

        }
    </style>
</head>
<body>
    <div class = "father">
        <div class="child"></div>
    </div>
</body>

(二)absolute + margin:auto

    <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: crimson;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class = "father">
        <div class="child"></div>
    </div>
</body>

 (三)absolute + calc计算

  <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: crimson;
            position: absolute;
            /* 这里calc()是css中的一种运算函数
            其中-50px 是盒子自身的一半
            是第一种方法的简写
            本质与方法一一样 */
            left: calc(50% - 50px);
            top: calc(50% - 50px);
        }
    </style>
</head>
<body>
    <div class = "father">
        <div class="child"></div>
    </div>
</body>

居中元素宽高未知

(一)Flex与margin: auto;

    <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: flex;
        }
        .child{
            background-color: crimson;
            /* 核心代码 */
            margin: auto;
        }
    </style>
</head>
<body>
    <div class = "father">
        <div class="child">你好,我是大聪明</div>
    </div>
</body>

(二)Flex与justify-content: center;align-items: center;

    <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
        }
        .child{
            background-color: crimson;
        }
    </style>
</head>
<body>
    <div class = "father">
        <div class="child">你好,我是大聪明</div>
    </div>
</body>

 (三)absolute + transform

    <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
        }
        .child{
            background-color: crimson;
            /* 核心代码 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 这里的-50%是相对于自己自身长度的百分比算的 */
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class = "father">
        <div class="child">你好,我是大聪明</div>
    </div>
</body>

关于transform不会的详见:https://blog.csdn.net/qq_45799465/article/details/122699588?spm=1001.2014.3001.5501CSS水平垂直居中的九种方式https://blog.csdn.net/qq_45799465/article/details/122699588?spm=1001.2014.3001.5501

(四)table表格元素(不推荐) 

    <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            /* 核心代码 */
            text-align: center;
        }
        .child{
            background-color: crimson;
            /* 利用行内块可以利用text-align: center;属性 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <table>
        <tbody>
          <tr>
            <td class="father">
              <div class="child">你好,我是大聪明</div>
            </td>
          </tr>
        </tbody>
      </table>
</body>

(五)display:table-cell

    <style>
        .father {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            /* 核心代码 */
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .child {
            background-color: crimson;
            /* 利用行内块可以利用text-align: center;属性 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td class="father">
                    <div class="child">你好,我是大聪明</div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

(六)网格(grid)布局

    <style>
        .father {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            /* 核心代码 */
            display: grid; 
            justify-content: center;
            align-items: center;
        }
        .child {
            background-color: crimson;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">你好,我是大聪明</div>
    </div>
</body>

上一篇:Echarts环形进度条


下一篇:[突发救援] 网站突发被腾讯云因未备案 屏蔽,60分钟内抢救恢复成功!