CSS flex弹性布局：子元素垂直居中、且靠右 作者：马育民 • 2024-10-18 15:37 • 阅读：10004 # 说明 如下图： [](/upload/0/0/1IX8d3RwuFxW.jpg) ### 分析 父元素设置弹性布局：`display: flex;` 父元素设置垂直居中：`align-items: center;` 子元素靠右：`margin-left: auto;` ### 代码 css： ``` .square{ background-color: #5b9bd5; /* border: 1px #969696 solid; */ width: 300px; height: 80px; position: relative; top:50px; /*距离顶部的像素值，相当于y坐标*/ left:100px; /*距离左侧的像素值，相当于x坐标*/ border-radius: 10px; display: flex; /* justify-content: center; */ align-items: center; } .square_block { width: 5px; height: 50%; background-color: #3c668c; cursor: col-resize; } .left{ /* float: left; */ } .right{ margin-left: auto; } ``` html： ``` <div class="square" name="square"> <div class="square_block left" ></div> <div class="square_block right" ></div> </div> ``` 参考： https://blog.csdn.net/ZHENGCHUNJUN/article/details/116756998 原文出处：http://malaoshi.top/show_1IX8d3VvUlWe.html