div盒子靠右垂直居中

要实现div盒子靠右垂直居中，可以使用以下代码实现：

<style>
    html,body{
        width: 100%;
        height: 100%;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }
    body div{
        box-sizing: border-box;
    }
    .parent{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 1080px;
        height:700px;
        border: 5px solid #000000;
        background:#ddd;
    }
    .children{
        width:500px;
        height:300px;
        background:green;
        margin-top: -150px;
        margin-right: 0;
        margin-bottom: -150px;
        margin-left: auto;
    }
</style>
<div class="parent">
    <div class="children"></div>
</div>

这段代码使用了flex布局，通过设置`.parent`的`justify-content: flex-end;`将div盒子靠右对齐，`align-items: center;`实现垂直居中。然后通过设置`.children`的`margin-top`和`margin-bottom`为负数的一半高度，将div盒子向上移动自身高度的一半，实现垂直居中。同时，将`margin-right`设置为0，将`margin-left`设置为`auto`，实现靠右对齐。
#### 引用[.reference_title]
- *1* *2* *3* [div水平垂直居中的常用方法](https://blog.csdn.net/qq_26695613/article/details/126300765)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]