css几种常用的垂直居中定位

最新推荐文章于 2024-09-07 17:40:45 发布

原创最新推荐文章于 2024-09-07 17:40:45 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了六种使用CSS实现元素居中的方法，包括利用绝对定位、相对定位、Flex布局等不同场景下的应用，并提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、知道定位元素的高度与宽度时可采用如下方式：

<div class="content content1">
    <div class="center1">

    </div>
</div>

.container .content{
    margin: auto;
    width: 80%;
    height: 200px;
    border: 1px solid green;
    margin-top: 20px;
}
.container .content .center1{
    border: 1px solid yellow;
    width: 60%;
    margin: auto;
    position: relative;
    top: 50%;
    height: 80px;
    margin-top: -40px;
}

二、直接上代码

<div class="content">
    <div class="center2">

    </div>
</div>
.container .content{
    margin: auto;
    width: 80%;
    height: 200px;
    border: 1px solid green;
    margin-top: 20px;
    position: relative;
}
.container .content .center2{
    border: 1px solid red;
    width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 40%;
    transform: translate(-50%,-50%);
}

三、

<div class="content">
    <div class="center3">

    </div>
</div>
.container .content{
    margin: auto;
    width: 80%;
    height: 200px;
    border: 1px solid green;
    margin-top: 20px;
    position: relative;
}
.container .content .center3{
    border: 1px solid blue;
    width: 60%;
    height: 40%;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

四、flex布局、移动端常用

<div class="content4">
    <div class="center4">

    </div>
</div>
.container .content4{
    margin: auto;
    width: 80%;
    height: 200px;
    border: 1px solid green;
    margin-top: 20px;
   display: -webkit-flex;
    display:flex;
     justify-content: center;
    align-items: center;
}
.container .content4 .center4{
    width: 60%;
    height: 40%;

    border: 1px solid orange;
}

五、

<div class="content5">
    <div class="center5">

    </div>
</div>
.container .content5{
    width:1000px;
    height: 200px;
    border: 1px solid green;
    display: table-cell;
    vertical-align: middle;
}
.container .content5 .center5{
     width: 60%;
     height: 40%;
     border: 1px solid darkblue;
     margin-left: 20%;
}

六、

<div class="content6">
    <div class="center6">
           sdsdsds
            </br>
        134
    </div>
</div>
.container .content6{
    width:1000px;
    height: 200px;
    border: 1px solid green;
    text-align: center;
}
.container .content6:before{
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    margin-right: -0.25em;
}
.container .content6 .center6{
     vertical-align: middle;
    display: inline-block;
    border: 1px solid red;
}