水平自适应居中宽高固定的div 宽高不知道的div 左右两边固定宽度div

骑猪看日落 2022-07-12 08:25 212阅读 0赞

红色代码 ：图一  左右两边固定宽度div，（随屏幕宽度改变）中间div自适应填满中间的空间

紫色代码：图二  宽高固定的div，（随屏幕宽度改变）水平自适应居中

蓝色代码：图三 宽高不知道的div，（随屏幕宽度改变）水平自适应居中

![SouthEast][]![SouthEast 1][]![SouthEast 2][]

.bl\{width: 30px;height:100px;float: left;background-color: salmon;\}      
.br\{width: 30px;height:100px;float: left;background-color: aqua;\}  
.bc\{margin: 0 30px 0 30px; \}  
.boxA\{width: 100%;height:100px;float: left;background-color: azure;\}     
        </style>  
    </head>  
    <body>

<div class="bl"></div>      
    <div class="bc">  
        <div class="boxA">用内容测测试用的内容</div>  
    </div>

</body>

</html>

.div \{ width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-110px; background:\#f90;\}

<div class="div">已知宽高的div自适应居中</div>

.a\{float:left;height:50px;width:50%;margin-left:50%;background-color: aqua;\}  
.b\{right:50%;height:40px;position: relative;background-color: red;\}

<div class="b">测测试用的内容</div>

</div>

[SouthEast]: https://img-blog.csdn.net/20170218215251619?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM3NTEwNjEy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20170218223341264?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM3NTEwNjEy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: /images/20220710/857d9490e8f04c2ea87f4c5c336f204f.png