html元素垂直居中的几种方法

最新推荐文章于 2024-04-12 11:37:26 发布

枭鹏

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量4.8k

点赞数 1

本文链接：https://blog.csdn.net/u014306354/article/details/52202624

版权

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>元素的垂直居中</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            #page{
                width: 100%;
                text-align: center;
                color:white;
            }
            #hd{
                height: 20px;
                background: rgba(26, 128, 0, 0.6);
                padding: 15px 15px 50px 15px;
            }
            #bd{
                height: 800px;
                background: #f1f1f1;
            }
            #ft{
                background: #414128;
                height:80px;
                padding :20px;
                text-align: left;
            }
            #bd>div{
                width: 100%;
                height: 100px;
                color: white;
                border: 3px solid white;
            }
            .main1 {        
                background:#39c;
                display: table;
            } 
            .cell{
                display: table-cell;
                vertical-align: middle;
            }
            .main2{
                background: #516f7e;
                position: relative;
            }
            .content2{
                position: absolute;
                top: 50%;
                height: 50px;
                margin-top: -25px;
                border: 2px solid red;
                line-height: 50px;
                left: 0;
                right: 0;
            }
            .main3 {       
                background: #234251;
            }
            .nullMeta{
                height: 50%;
            }
            .content3{
                height: 50px;
                margin-top: -25px;
                border: 2px solid red;
                line-height: 50px;
            }
            .main4 {       
                background: #3a3d3f;
                position: relative;
            }
            .content4{
                height: 50px;
                width: 80%;
                position: absolute;
                top:0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                border: 2px solid red;
                line-height: 50px;
            }
            .main5 {       
                background: #445123;
                line-height: 100px;
            }
            .main6 {       
                background: #0c5273;
                position: relative;
            }
            .content6{
                position: absolute;
                top: 50%;
                height: 50px;
                width: 97%;
                line-height: 50px;
                left: 50%;
                transform: translate(-50%,-50%);
                border: 2px solid red;
            }
             .main7 {       
                background: #0c733a;
            }
            .content7{
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div id="page">    
            <div id="hd">
                <h3>这里是一些关于元素垂直对齐的一些方法以及demo</h3>
            </div>    
            <div id="bd">        
                <div class="main1">
                    <div class="cell">
                        这里是容器一，用父元素的 display:table;子元素的display:table-cell;verticel-align:middle; 实现垂直居中。
                    </div>
                </div>    
                <div class="main2">
                    <div class="content2">
                        这里是容器二，父元素用 position: relative;，子元素的display:position: absolute;top: 50%;height: 50px;margin-top: -25px; 实现红色边线内部部分的垂直居中。
                    </div>
                </div>       
                <div class="main3">
                    <div class="nullMeta">这里是一个空标签</div>
                    <div class="content3">
                        这里是容器三，用一个空的标签占位height:50%，子元素用margin-top:-25px;进行回补，实际元素高度50px;实现垂直居中。
                    </div>
                </div>
                <div class="main4">
                    <div class="content4">
                        这里是容器四，用父元素的 display:relative;直接采用position:absolute;top:0;left:0;right:0;bottom:0;margin:auto来实现水平以及垂直居中。
                    </div>
                </div>
                <div class="main5">
                    这里是容器五，其实对于内容的垂直居中，上面都使用了line-height来实现文本的垂直居中。
                </div>
                <div class="main6">
                    <div class="content6">
                        这里是容器六，用css3来实现垂直居中，子元素采用了绝对定位后再left，top50%，再用css3的transform属性用translate(-50%,-50%)来补回原来的自身的高度差实现垂直居中。
                    </div>
                </div>
                <div class="main7">
                    <div class="content7">
                        这里是容器七，用css3来实现垂直居中以及水平居中，用css3display: flex;实现设置属性值：align-items: center;justify-content: center;。来实现垂直与水平的居中。
                    </div>
                </div>
            </div>   
            <div id="ft">
                <pre> 总结下：其实实现垂直居中只有一下几种思路：
                    1：对于最简单的纯文本的居中height值与line-height设置为一样即可。
                    2：对于最普通的垂直居中采用绝对定位后设置left：50%；与bottom：50%后再采用各种方式去实现自身高度差的补回。
                    3：对于普通的元素对齐还可以采用绝对定位后left:0;right:0;top:0;bottom:0;在此基础之上就可以采用margin:auto;实现对齐了。
                    4：用css3的Flexbox属性
                </pre>
            </div>
        </div>
</html>

枭鹏

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html元素垂直居中的几种方法

 元素的垂直居中
复制链接

扫一扫