使盒子水平垂直居中

Liuyilllin

已于 2022-04-01 22:37:28 修改

阅读量106

点赞数

分类专栏： HTML5 + CSS3 文章标签：前端 html5 css3

于 2022-03-29 18:56:41 首次发布

本文链接：https://blog.csdn.net/Liuyilllin/article/details/123829102

版权

HTML5 + CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

定位写死

<style>
    .father {
        position: relative;
        
        width: 500px;
        height: 400px;
        background-color: pink;
    }

    .son {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;

        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>
  
<div class="father">
    <div class="son"></div>
</div>

四测为0

<style>
    .father {
        position: relative;
        
        width: 500px;
        height: 400px;
        background-color: pink;
    }

    .son {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>
  
<div class="father">
    <div class="son"></div>
</div>

利用transform

<style>
    .father {
        position: relative;

        width: 500px;
        height: 400px;
        background-color: pink;
    }

    .son {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

利用display: flex;

<style>
   .box {
       width: 500px;
       height: 400px;
       background-color: pink;

       display: flex;
       justify-content: center;
       align-items: center;
   }

   .box div {
       width: 200px;
       height: 200px;
       background-color: purple;
   }
</style>

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