CSS 基础知识之垂直水平居中

最新推荐文章于 2025-02-04 20:13:59 发布

qq_23835421

最新推荐文章于 2025-02-04 20:13:59 发布

阅读量341

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_23835421/article/details/122111319

版权

最近想转行前端面试时被教育了，关于css设置水平垂直居中这个应该是基础的基础了回答不上来确实还是有点尴尬的我第一时间就想到了最简单的针对 div设置 margin 0 auto ; 实操一下


<body>
    <div class="box">
        <div class="item">居中</div>
    </div>

</body>
<style>
    .box{
        background-color: aquamarine;
        width: 300px;
        height: 300px;
    }
    .item{
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-color: bisque;
    }
</style>

以上代码运行后可以看到只进行了水平居中，

如果要继续达成垂直水平居中可以在这个基础上设置相对定位 top 50% 并向上偏移元素一半的高度代码如下注意因为父元素是个div 给子元素设置margin-top时父元素会一起上移所以需要给父元素设置一个padding-top 或者通过下面的 translate来实现

.box {
        width: 300px;
        height: 300px;
        padding-top: 1px;
        margin: 0;
        background-color: blue;

    }

    .item {
        width: 100px;
        height: 100px;
        background: orange;
        margin: 0 auto;
        /*水平居中*/
        position: relative;
        /*设置position*/
        top: 50%;
        margin-top: -50px;/*元素高度的一半 */

    }

效果如图

还有其他方法比如使用绝对定位方式来实现垂直水平居中

<body>
    <div class="box">
        <div class="item">居中</div>
    </div>

</body>
<style>
    .box {
        background-color: aquamarine;
        width: 300px;
        height: 300px;
        position: relative;
    }

    .item {
        position: absolute;
        background-color: blanchedalmond;
        text-align: center;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        /*高度的一半*/
        margin-left: -50px;
        /*宽度的一半*/
    }
</style>

效果如图，但是就像代码里写的一样这种需要提前知道具体元素大小然后通过搜索引擎看到现在css3.0 可以使用设置transform来替换 margin的设置 translate主要是设置元素的2d偏移量可以针对元素自身的百分比设置所以完成了水平垂直居中

  .item {
        position: absolute;
        background-color: blanchedalmond;
        text-align: center;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /* margin-top: -50px; */
        /*高度的一半*/
        /* margin-left: -50px; */
        /*宽度的一半*/
    }

还可以使用弹性盒子 flex 布局来实现这个使用应该是比较多的代码如下

    .box {
        display: flex;
        background-color: aquamarine;
        width: 300px;
        height: 300px;
        align-items: center;
        justify-content: center;
    }

    .item {
        width: 100px;
        height: 100px;
        background: orange;
    }

效果如下