居中效果的简单总结

最新推荐文章于 2024-05-06 12:13:05 发布

懵逼菜鸟 13号

最新推荐文章于 2024-05-06 12:13:05 发布

阅读量269

点赞数

文章标签：居中效果简单总结

本文链接：https://blog.csdn.net/pangxingqun_/article/details/89145399

版权

1.文字垂直居中

文字所在的模块的他的高，和他的行高，设置成一样的。

例如，想要实现div里面的文字水平和垂直都居中显示 在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        background: #abcdef;
        width: 800px;
        height: 200px;
        line-height: 200px;     /*行高与div的高度一致 产生垂直居中*/
        text-align: center;     /*这是水平居中*/
    }
    </style>
</head>
<body>
    <div>垂直居中</div>
</body>
</html>

2.块元素垂直居中与父元素

例如在父元素parent想要实现子元素child的垂直和水平居中
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .parent {
        width: 800px;
        height: 200px;
        background: #abcdef;
        position: relative;     /*相对定位 允许子元素相对于父元素进行定位*/
    }
    .child {
        height: 50px;
        line-height: 50px;      /*文字在自身元素中 垂直居中*/
        background: lightgreen;
        position: absolute;     /*绝对定位 根据父元素进行定位*/
        top: 50%;               /*child的位置是相对于父元素高度的50%开始*/
        margin-top: -25px;      /*考虑自身的高度是50px child是在父元素的50%位置 
        所以减去child自身高度的一半 达到自身的50% 与父元素的50%相重合 */                
    }
    </style>
</head>
<body>
    <div class="parent">我是父元素
        <div class="child">根据父元素垂直居中</div>
    </div>
</body>
</html>

3.块元素（容器）水平居中

根据父元素水平居中效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .parent {
        width: 100%;
        height: 200px;
        background: #abcdef;  
    }
    .child {
        width: 800px;
        height: 200px;
        line-height: 200px;      
        background: lightgreen; 
        margin: 0 auto 0 auto;      /*距离 上0 下0 左右自适应居中*/       
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">根据父元素水平居中</div>
    </div>
</body>
</html>

懵逼菜鸟 13号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
居中效果的简单总结

1.文字垂直居中文字所在的模块的他的高，和他的行高，设置成一样的。例如，想要实现div里面的文字水平和垂直都居中显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
复制链接

扫一扫