芭比龙

导航

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 2020-08-05 18:53  芭比龙  阅读(101)  评论(0)  编辑  收藏  举报