一,父子元素宽度高度固定
初始代码:
<div class="parent">
<div class="children"></div>
</div>
<style>
.parent{
width: 200px;
height: 200px;
background-color: skyblue;
}
.children{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
界面:
绝对定位
绝对定位的百分比是相对于父元素的宽高,通过这个特性可以让子元素的居中显示,但绝对定位是基于子元素的左上角,期望的效果是子元素的中心居中显示。
方式一(此种方式不固定子元素宽高亦可)
先将元素的左上角定位到元素的中心(top:50%; left:50%),效果如下:
.parent{
...
position: relative;
}
.children{
...
position: absolute;
left:50%;
top:50%;
}
然后通过translate调整元素的中心,到页面的中心。
.children{
...
transform: translate(-50%,-50%);
}
方式二
设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水平和垂直方向上的居中。
.parent{
...
position: relative;
}
.children{
...
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
方式三
先将元素的左上角定位到元素的中心(top:50%; left:50%),然后再通过margin负值调整元素中心到页面中心的距离。
.parent{
position: relative;
}
.children{
position: absolute;
top: 50%;
left: 50%;
/*自身宽度-100 高度-100 的一半*/
margin-left: -50px;
margin-top: -50px;
}
方式四
先将元素的左上角定位到元素的中心(top:50%; left:50%),然后通过calc来计算。
.parent{
position:relative;
}
.children{
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
弹性盒布局
通过align-items:center 和 justify-center设置容器的垂直和水平方向居中对齐。
.parent{
display:flex;
/*主轴居中对齐*/
justify-content:center;
/*侧轴居中对齐*/
align-items: center;
}
二,父元素宽高固定,子元素宽高不固定
基础代码:
<style>
.parent{
width: 200px;
height: 200px;
border: 1px solid red;
}
.children{
background-color: pink;
}
</style>
<div class="parent">
<div class="children size"> 文本</div>
</div>
界面效果:
绝对定位
先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素的中心点到页面的中心
.parent{
position:relative;
}
.children{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
效果:
设置行高line-height
把children设置为行内元素,通过text-align就可以做到水平居中,通过vertical-align也可以在垂直方向做到居中,最后将children的行高设置为默认值(line-height是可继承的,需要单独设置下子元素的行高)。
.parent{
line-height: 200px;
text-align: center;
}
.children{
display: inline-block;
vertical-align:middle;
line-height: initial;
}
css-table布局
通过display设置为table-cell,然后使用text-align 、vertical-align实现水平居中和垂直居中。
.parent{
display:table-cell;
text-align: center;
vertical-align: middle;
}
.children{
display: inline-block;
}
flex布局
同上面的弹性盒布局
.parent{
display:flex;
/*主轴居中对齐*/
justify-content:center;
/*侧轴居中对齐*/
align-items: center;
}
grid布局
这个简单做下了解就可以。
.parent{
display:grid;
}
.children{
align-self: center;
justify-self: center;
}