块级元素在块级元素内部垂直居中

最新推荐文章于 2021-08-17 17:14:15 发布

b474440171

最新推荐文章于 2021-08-17 17:14:15 发布

阅读量199

点赞数

原文链接：http://www.cnblogs.com/myunYao/p/8872271.html

版权

本文介绍了一种利用CSS属性使块级元素在其父元素内水平和垂直居中的方法。通过给父级元素添加相对定位，并对子元素使用绝对定位，结合left、top属性和负值的margin属性，实现子元素的精确居中。案例代码展示了具体的实现细节。

摘要由CSDN通过智能技术生成

步骤：

1、给父级元素添加相对定位position：relative；

2、子元素设置如下：

　　position: absolute;

　　left: 50%;

　　top: 50%;

　　//设置为子元素width的一半，设置为负值

　　margin-left: -25px;

　　//设置为子元素height的一半，设置为负值

　　margin-top: -25px;

代码案例如下：

<!DOCTYPE html>
<html>
<head>
    <title>块级元素在块级元素内部垂直居中</title>
</head>
<style type="text/css">
    .external{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;

    }
    .internal{
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -25px;
        margin-top: -25px;

    }
</style>
<body>
    <div class="external">
        <div class="internal"></div>
    </div>

</body>
</html>

转载于:https://www.cnblogs.com/myunYao/p/8872271.html