左右布局，以及div水平垂直居中的几种方法

最新推荐文章于 2023-09-11 18:44:00 发布

偷走你的笑

最新推荐文章于 2023-09-11 18:44:00 发布

阅读量261

点赞数

分类专栏：深蓝的大学

本文链接：https://blog.csdn.net/weixin_42680298/article/details/89217342

版权

深蓝的大学专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>ceshi</title>
    </head>
    <body>
        <div class="box">
            <div class="left">
                123
            </div>
            <div class="right">456</div>
        </div>
    </body>
</html>

<style>
.box{
    width: 200px;
    height: 200px;
    position: absolute;
    /* 
    方法一 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    */
    /* 
    方法二
    left: 50%;
    top: 50%; 
    margin: -100px 0 0 -100px;
    */
    
    /* 方法三 */
    left: 50%;
    top: 50%; 
    transform: translate(-50%,-50%);
    
    background: #4185f3;
}
.left{
    display: inline;

}
.right{
    float: right;
}
</style>

运行结果如下