关于css垂直水平居中的几种方法

CSS居中布局技巧

最新推荐文章于 2025-05-30 15:17:23 发布

三叔的负能量

最新推荐文章于 2025-05-30 15:17:23 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/joesbell/p/5939441.html

本文介绍了三种使用CSS实现元素垂直及水平居中的方法：通过display属性设置为table-cell实现内联元素居中；利用Flexbox的特性使子元素在父容器中居中；通过绝对定位结合transform属性实现精确居中。

第一种，针对内联元素居中.

<div class="box box1">
    <span class="test">垂直居中</span>
</div>
<style>
    .box{
        width: 200px;
        height: 200px;
        border:1px solid red;
    }
    .box1{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .test{
        width: 30px;
        height: 30px;
        border:1px solid black;
    }
</style>

2: 弹性盒子

<div class="box box1">
    <div class="test"></div>
</div>
<style>
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        border:1px solid red;
    }
    .test{
        width: 30px;
        height: 30px;
        border:1px solid black;
    }
</style>

3translate

<div class="box box1">
    <div class="test"></div>
</div>
<style>
    .box{
        position: relative;
        width: 200px;
        height: 200px;
        border:1px solid red;
    }
    .test{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 30px;
        height: 30px;
        border:1px solid black;
    }
</style>