芭比龙

导航

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

统计

CSS实现垂直居中

 

1.flex布局

先渲染出一个正方形

<body>
    <div class="box"></div>

</body>
<style>
   .box{
            width: 300px;
            height: 300px;
            background-color: red;
            
        }
</style>

将元素的父类设置flex布局

复制代码
<style>
  html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
          
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
</style>
复制代码

效果如图

 

2.定位

复制代码
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
          
        }
    

        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 0 auto; //实现水平居中
            position: relative;//相对定位
            top: calc(100vh/2);//顶部高度为屏幕的一半
            transform: translateY(-50%);//沿Y周向上移元素的一半
        }
    </style>
复制代码

 

posted on   芭比龙  阅读(102)  评论(0编辑  收藏  举报

点击右上角即可分享
微信分享提示