web前端常见的几种居中方法
使用定位(父盒子相对定位，子盒子绝对定位)移动父盒子的一半，再使用外边距移动子盒子的一半。但这种方法的缺点是盒子的大小必须是固定的。使用频率：前两种方法使用最多（前端开发必会），第三种有致命缺点基本不使用，第四种属于拓展知识范围正经开发不会使用。使用定位(父盒子相对定位，子盒子绝对定位)移动父盒子的宽高各一半，再使用位移往回移动子盒子自身的一半。使用定位(父盒子相对定位，子盒子绝对定位)将四个方位
·
1.flex布局实现盒子居中：
将父盒子设为弹性容器，并使用主轴居中属性和侧轴居中属性。
公共结构代码：
<body>
<div class="demo">
<div class="box"></div>
</div>
</body>代码示例：
<style>
.demo{
width: 500px;
height: 500px;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 200px;
background-color: #0f0;
}
</style>2.定位+位移实现盒子居中：
使用定位(父盒子相对定位，子盒子绝对定位)移动父盒子的宽高各一半，再使用位移往回移动子盒子自身的一半。
代码示例：
<style>
.demo{
width: 500px;
height: 500px;
background-color: #f00;
position: relative;
}
.box{
width: 200px;
height: 200px;
background-color: #0f0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>3.定位+外边距实现盒子居中：
使用定位(父盒子相对定位，子盒子绝对定位)移动父盒子的一半，再使用外边距移动子盒子的一半。但这种方法的缺点是盒子的大小必须是固定的。
代码示例：
<style>
.demo{
width: 500px;
height: 500px;
background-color: #f00;
position: relative;
}
.box{
width: 200px;
height: 200px;
background-color: #0f0;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>4.定位+外边距为auto实现盒子居中：
使用定位(父盒子相对定位，子盒子绝对定位)将四个方位名词的值都设为0，margin的值设为auto。
代码示例：
<style>
.demo{
width: 500px;
height: 500px;
background-color: #f00;
position: relative;
}
.box{
width: 200px;
height: 200px;
background-color: #0f0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>使用频率：前两种方法使用最多（前端开发必会），第三种有致命缺点基本不使用，第四种属于拓展知识范围正经开发不会使用。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)