提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

CSS实现垂直水平居中

CSS 实现 水平 居中 垂直
2023-09-11 14:15:29 时间

一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：

<div class="wrapper">
     <div class="content"></div>
</div>

CSS：

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均设置为0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin设置为auto*/
    margin:auto;
    border: 1px solid green;    
}

效果如下：

相关文章