web前端的居中方法总结
前言:完整代码链接
我已经把完整代码放在 居中代码 。
一、利用flex弹性布局进行居中
1、flex居中原理
首先你得去百度理解flex布局的相关概念。felx布局中有两个轴,一个主轴,一个交叉轴。主轴默认为水平横轴,交叉轴就是和主轴垂直的那个轴。我们设置主轴方向上的对齐方式为center,交叉轴方向上的对齐方式为center,那么就是垂直居中对齐了。
2、代码
html代码:
<div class="box flex-center">
<div></div>
</div>
css代码居中代码,写在盒子上:
.box{ /*box为居中元素所在的盒子*/
display:flex;
justify-content:center;
align-items:center;
}
.flex-center div{
background-color:red;
}
盒子的样式代码:
.box{
width: 15rem;
height: 15rem;
padding: 1.4rem;
border: 0.25rem dashed white;
border-radius: 1rem;
}
.box div{
width: 5rem;
height: 5rem;
border-radius: 0.5rem;/*正方形圆角*/
}
效果如图:
)
二、绝对位置居中
1.绝对位置居中的原理
这个原理简单,就是先把元素(.box里的元素)变为定位元素
position:absolute;
然后上下左右偏移为0,margin设为auto,他就会自动改变margin的值,自动居中了。
2.代码
html代码如下:
<div class="box absolute-center">
<div></div>
</div>
css代码如下(居中代码写在元素上):
.box{ /* 先画一个盒子,用白色虚线框起来*/
width: 15rem;
height: 15rem;
padding: 1.4rem;
border: 0.25rem dashed white;
border-radius: 1rem;
}
/*----------绝对定位居中的代码----------*/
.absolute-center{
position:relative; /*注意,这个绝对不能少*/
}
.absolute-center div{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
background-color:blue;
}
效果如图: