css 布局(并排、水平居中、垂直水平居中)

Slow菜鸟

已于 2023-04-27 17:51:12 修改

阅读量901

点赞数

分类专栏： css 文章标签： css javascript html

于 2023-04-27 17:41:14 首次发布

本文链接：https://blog.csdn.net/qq_20236937/article/details/130411052

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css 布局并排、水平居中、垂直水平居中

前言：css经常会使用并排布局

1.并排布局（float（浮动）实现）

在这里插入图片描述
1.使用float（浮动）

html部分

<body>
<div class="main">
<div class="left"> 左侧区域</div>
<div class="right">右侧区域</div>
<div class="clear"></div>
/div>
</body>

css部分

.main .left,.main .right{
border: 1px solid #FE6464;
height: 200px;
text-align: center;
line-height: 200px;
color: #FE6464;
font-size: 30px;
}
.left {width: 48%;float: left;}
.right{width: 48%;float: right;}
.clear{clear: both;}

缺点：float浮动虽然可以实现两个div并排，但是
1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。
2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面

2.并排布局（display:flex（弹性布局）实现）

用display:flex布局，可以解决这两个缺点

.main {
display:flex
}
.left {flex:1}
.right{flex:2}

父级元素定义display:flex,子元素宽度用flex来定义,flex 是分割父级元素的占比,如下1:2
在这里插入图片描述

3.并排布局之垂直水平居中（display:flex（弹性布局）实现）

参考文章
【1】https://blog.csdn.net/qq_44983621/article/details/104768986

css部分

/*父盒子*/
.testParent{
    width: 700px;
    height: 200px;
    display: flex;
    flex-direction: row; /*默认也是row可以不写*/
    background-color: #428BCA;
    align-items: center;  /*这种情况是垂直居中*/
    justify-content: center;/*这种情况是水平居中*/

}
/*子盒子*/
.test{
    width: 100px;
    height: 50px;
    background-color: aqua;
}

css中还有其他方法同样也可以实现垂直水平居中
【1】https://blog.csdn.net/weixin_45453819/article/details/122082501
【2】https://blog.csdn.net/qq_33721778/article/details/122165187?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-122165187-blog-122082501.235%5Ev32%5Epc_relevant_default_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-122165187-blog-122082501.235%5Ev32%5Epc_relevant_default_base3&utm_relevant_index=5