CSS实现垂直水平居中

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

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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;   
}

效果如下:

posted @   每天都要进步一点点  阅读(192)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示