HTML+CSS实现div和文本水平垂直居中

最新推荐文章于 2023-09-11 18:44:00 发布

Qian_Qian_IT

最新推荐文章于 2023-09-11 18:44:00 发布

阅读量237

点赞数 2

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/Qian_Qian_IT/article/details/119600438

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML+CSS实现div和文本水平垂直居中

position的取值：
1.1 static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
1.2 relative：相对于其原始位置。
1.3 fixed：相对于浏览器窗口。
1.4 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于根元素html。
参考：菜鸟教程-position
代码：
2.1 正常情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .container{
            margin: 72px auto;
            width: 360px;
            height: 360px;
            background-color: red;
            position: relative;/*为容器（父元素）添加一个定位，不能为默认值static，为子元素提供基准。*/
        }
        .container div{
            width: 100px;
            height: 70px;
            background-color: green;
            position: absolute;/*父元素需要设置position属性，否则将会相对于根元素*/
            margin: 145px 130px;/*(父元素宽度 - 子元素宽度) / 2*/
            z-index: 1;/*内层div显示在上层*/
            text-align: center;
            line-height: 70px;/*内层div的高度*/
            vertical-align: middle;/*文本居中对齐*/
            color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>文本居中</div>
    </div>
</body>
</html>

2.2 特例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        /* 特例 */
        .container{
            margin: 72px auto;
            width: 360px;
            height: 360px;
            background-color: red;
            position: relative;/*为容器（父元素）添加一个定位，不能为默认值static，为子元素提供基准。*/
        }
        .container div{
            width: 50%;/*设置子元素的宽度为父元素宽度的50%*/
            height: 50%;
            background-color: green;
            position: absolute;/*父元素需要设置position属性，否则将会相对于根元素*/
            margin: 25%;/*当宽高不为父元素50%时，margin的值也将随之改变*/
            z-index: 1;
            text-align: center;
            line-height: 180px;/*内层div的高度*/
            vertical-align: middle;/*文本居中对齐*/
            color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>文本居中</div>
    </div>
</body>
</html>

截图：

Qian_Qian_IT

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS实现div和文本水平垂直居中

HTML+CSS实现div和文本水平垂直居中position的取值：1.1 static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。1.2 relative：相对于其原始位置。1.3 fixed：相对于浏览器窗口。1.4 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于来源：菜鸟教程-position代码：2.1 正常情况<
复制链接

扫一扫