垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布

aomize

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量355

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/aomize/article/details/76021455

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

垂直居中方式
（1）父元素高度确定的内联元素垂直居中
通过给父元素设置line-height来实现，line-height值和父元素高度值相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中方式</title>
    <style>
    div {
        width: 480px;
        height: 100px;
        line-height: 100px;
        border: 1px solid #000;
    }
    span {
        border: 1px solid #000;s
    }
    </style>
</head>
<body>
    <div>   
        <span>内联元素</span>
    </div>
</body>
</html>

效果如下图所示

这里写图片描述

缺点：此方法不适用于块状元素，而且需要知道父元素的高度

（2）块状元素垂直居中
设置position属性后，设置top:为50%，margin-top为元素高度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中方式</title>
    <style>
    div {
        width: 480px;
        height: 100px;
        border: 1px solid #000;
    }
    h3 {
        position: relative;
        top: 50%;
        left: 50%;
        width: 90px;
        height: 30px;
        margin-left: -45px;
        margin-top: -15px;
        border:1px solid #000;
    }
    span {
        border: 1px solid #000;s
    }
    </style>
</head>
<body>
    <div>
        <h3>块级元素</h3>
        <span>内联元素</span>
    </div>
</body>
</html>

效果如下图所示

这里写图片描述

缺点：元素定位后带来一定的副作用

（3）父元素高度不确定的内联元素、块状元素垂直居中
通过给父元素设置相同的padding-top与padding-bottom来实现垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中方式</title>
    <style>
    div {
        width: 480px;
        padding: 20px 0;
        border: 1px solid #000;
    }
    h3 {
        margin: 0;
        padding: 0;
        border:1px solid #000;
    }
    span {
        border: 1px solid #000;s
    }
    </style>
</head>
<body>
    <div>
        <h3>块级元素</h3>
        <span>内联元素</span>
    </div>
</body>
</html>

效果如下图所示

这里写图片描述

优点：不仅适用于内联元素，还适用于块状元素

（4）父元素高度确定的内联元素、块级元素的垂直居中
通过给父元素设置vertical-align为middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中方式</title>
    <style>
    div {
        display: table-cell;
        width: 480px;
        height: 100px;
        vertical-align: middle;
        border: 1px solid #000;
    }
    h3 {
        margin: 0;
        padding: 0;
        border:1px solid #000;
    }
    span {
        border: 1px solid #000;s
    }
    </style>
</head>
<body>

    <div>
        <h3>块级元素</h3>
        <span>内联元素</span>
    </div>

</body>
</html>

效果如下图所示

这里写图片描述

（完）

aomize

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
垂直居中

垂直居中方式（1）父元素高度确定的内联元素垂直居中通过给父元素设置line-height来实现，line-height值和父元素高度值相同<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>垂直居中方式</title> <style> div { width
复制链接

扫一扫

专栏目录