div水平垂直居中的七种方法
提示:以下是本篇文章正文内容,下面案例可供参考
绝对定位方式可分为以下三种方法:
在绝对定位下,top bottom left right四个值都为 0,margin:auto。
代码如下(实例):
html:
<div class="box">
<div class="small">div>
div>
css:
.box{
width: 500px;
height: 500px;
border: 3px solid #f00;
position: relative;
text-align: center;
line-height: 500px;
}
.small{
width: 100px;
height: 100px;
background-color: #00f;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
这种方法可以直接不用管盒子宽高具体数值,在绝对定位下,top left 都设为 50% ,然后用平移的方法向左、向上分别移动小盒子的50% ( transform: translate(-50%, -50%); )
代码如下(实例):
(这里html代码一样,我就不多赘述了~)
css:
.small{
width: 100px;
height: 100px;
background-color: #00f;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
这种方法和方法二差不多,但是前提是得知道子盒子宽高的具体数值。
在绝对定位下,left top 都设为 50% ,然后用margin的方法,左、上外边距分别为子盒子宽、高的一半像素的负值
代码如下(实例):
(这里html代码一样,我就不多赘述了~)
css:
这里子盒子宽高都是100px,所以外边距的值为 margin: -50px 0 0 -50px;
.small{
width: 100px;
height: 100px;
background-color: #00f;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
在绝对定位下,利用calc() 函数动态计算实现水平垂直居中
代码如下(示例):
css
left:calc((400px - 200px)/2);
top:calc((160px - 50px)/2);
.box{
width: 500px;
height: 500px;
border: 3px solid #f00;
position: relative;
}
.small{
width: 100px;
height: 100px;
background-color: #00f;
position: absolute;
left:calc((500px - 100px)/2);
top:calc((500px - 100px)/2);
}
为子盒子的父级元素添加flex方法
代码如下(示例):
display: flex;
align-items: center;
justify-content: center;
css:
.box {
width: 500px;
height: 500px;
border: 3px solid #f00;
display: flex;
align-items: center;
justify-content: center;
}
.small {
width: 100px;
height: 100px;
background-color: #00f;
}
在小div后,新增span标签,给小盒子设置vertical-align:middle
给大盒子设置line-height为大盒子高度,text-align:center
代码如下(示例):
html:
<div class="box">
<div class="small">div>
<span>span>
div>
css:
.box {
width: 500px;
height: 500px;
border: 3px solid #f00;
}
.small{
width: 100px;
height: 100px;
background-color: #00f;
display: inline-block;
/*
修饰的是行内块
垂直的对齐方式
参考谁进行垂直对齐 - 当前行
*/
vertical-align: middle;
}
为子盒子的父元素添加 grid 变成网格布局,设置成一行一列的网格,再将其垂直水平居中。
代码如下(示例):
grid-template-columns: 100px;
grid-template-rows: 100px;
justify-content: center;
align-content: center;
css:
.box {
width: 300px;
height: 300px;
border: 3px solid #f00;
margin: 200px auto;
display: grid;
grid-template-columns: 100px;
grid-template-rows: 100px;
/* justify-content: center;
align-content: center; */
/* 复合写法 垂直对齐方式 水平对齐方式*/
place-content: center center;
}
.small {
width: 98px;
height: 98px;
border: 1px solid blue;
}
多总结,多积累