首页 > 其他分享> > CSS水平垂直居中的九种方式

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

2022-01-26 15:04:14 作者：互联网

居中元素宽高已知

（一）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.5501https://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>

标签：居中,center,500px,father,height,width,black,九种,CSS
来源： https://blog.csdn.net/qq_45799465/article/details/122701210