老师我是不是记得定位也有个水平垂直居中的方法

首页课程实战体系课手记专栏慕课教程

来源：2-8 position-absolute（实际工作用的最多，同时也相对比较难）

尤尼酱

2019-04-04 23:06:00

老师我是不是记得定位也有个水平垂直居中的方法 left:50%;top:50%后怎么设置水平垂直居中

写回答

2回答

Miss路

2019-04-05

已采纳

同学，你好。使用定位实现垂直居中的方法和水平居中是一样的，首先要设置为定位，如果是垂直居中的话，需要给元素设置top：50%，然后再margin-top:负本身高度的一半，给你举个水平垂直居中的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .per{
            width: 800px;
            height: 600px;
            border: 1px solid red;

            position: relative;/*设置相对点*/
        }
        .son{
            width:200px;
            height: 100px;
            background-color: red;


            position: absolute;/*设置绝对定位*/

            /*以下两行是设置垂直居中*/
            top: 50%;
            margin-top: -50px;

            /*以下两行是设置水平居中*/
            left: 50%;
            margin-left: -100px;

        }
    </style>
</head>
<body>
    <div class="per">
        <div class="son"></div>
    </div>
</body>
</html>

如果帮助到了你，欢迎采纳！

祝学习愉快！