居中对齐——快速对齐+未知宽高对齐

飘向万星西

于 2022-09-15 11:54:48 发布

阅读量195

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/WanXingxi/article/details/126867638

版权

本文详细介绍了三种CSS实现元素居中对齐的方法。第一种是使用弹性布局和margin:auto;，第二种是在未知宽高的情况下通过flex布局进行水平和垂直居中，第三种是利用绝对定位结合transform:translate()实现居中。这些方法适用于不同场景下的网页布局需求。

摘要由CSDN通过智能技术生成

一、快速居中对齐方法：给父级添加弹性布局(display: flex;)，之后给自己添加（margin:auto;）

  <style>
        .content {
            width: 500px;
            height: 500px;
            background: rgb(159, 220, 255);
            display: flex;
        }

        .box {
            margin: auto;
            background-color: #fff;
        }
    </style>
    <div class="content">
        <div class="box">
            <span>
                快速居中对齐
            </span>
        </div>
    </div>

二、不知宽高情况下居中

1.给父元素添加CSS：弹性布局(display: flex;)、水平对齐(justify-content: center;)、垂直对齐(align-items: center;)

 <div class="content">
        <div class="box">
            <span>
                父元素{<br>
                display: flex;<br>
                justify-content: center;<br>
                align-items: center;<br>
                }<br>
            </span>
        </div>
   </div>

 <style>
        .content {
            background-color: aqua;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .box {
            background-color: cadetblue;
        }
    </style>

2. 利用display:table-cell; 但是会使一些css无效，如margin

    <style>
        .content {
            background-color: aqua;
            width: 500px;
            height: 500px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .box {
            background-color: cadetblue;
        }
    </style>
    <div class="content">
        <div class="box">
            <span>
                父元素{<br>
                display:table-cell;<br>
                vertical-align: middle;<br>
                text-align: center;<br>
                }<br>
                子元素{<br>
                display: inline-block;<br>
                }<br>
            </span>
        </div>

    </div>

3.利用绝对定位 position: absolute;，以父级的左上角为轴，设top和left为50%，之后在以自己为轴 transform: translate(-50%, -50%);

   <style>
        .content {
            background-color: aqua;
            width: 500px;
            height: 500px;
            position: absolute;
        }

        .box {
            background-color: cadetblue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <div class="content">
        <div class="box">
            <span>
                父元素{<br>
                position: absolute; <br>
                }<br>
                子元素{<br>
                position: absolute; <br>
                top: 50%; <br>
                left: 50%; <br>
                transform: translate(-50%, -50%); <br>
                }<br>
            </span>
        </div>
    </div>