最近的项目中经常遇到两个div并排显示,并且他们需要垂直居中显示,由于对css不大熟悉,所以每次都需要翻阅资料进行查阅,所以把自己学习的成果记录下来,方便以后进行查阅。
项目背景
本页面需要三个div,一父两子,要求两个子div在父div中垂直居中显示,此文中分别为三个div定义三个样式表,分别为parent、children1、children2。三个样式表是为了定义盒子的布局,另外我们还需要定义三个样式表来表示盒子的大小,分别为divParent、divChildren1、divChildren2,这三个盒子的布局如下:
<style>
.divParent {
width: 300px;
height: 300px;
background-color:cadetblue;
}
.divChildren1 {
width: 100px;
height: 100px;
background-color: red;
}
.divChildren2 {
width: 100px;
height: 50px;
background-color: blue;
}
</style>
<body>
<div class="divParent parent">
<div class="divChildren1 children1"></div>
<div class="divChildren2 children2"></div>
</div>
</body>
本文所要的最终呈现效果如图所示:
使用方法介绍
弹性布局
1.直接在父元素中设置
.parent {
display: flex;
justify-content: center;
align-items: center;
}
2.通过使用margin来实现子元素的布局(弹性布局,子div设置margin: 0 auto即可实现垂直居中)
.parent {
display: flex;
}
.children1 {
margin: calc(50% - 50px) 0 0 auto;
}
.children2 {
margin: calc(50% - 25px) auto 0 0;
}
3.使用align-self设置子元素的布局,align-self设置完后,使得该子元素不继承父元素的样式
.parent {
display: flex;
}
.children1 {
align-self: center;
}
.children2 {
align-self: center;
}
绝对定位
1.父元素设置相对定位,子元素设置绝对定位,然后子元素先设置位置,再设置平移距离
.parent {
position: relative;
}
.children1 {
position: absolute;
left: calc(50% - 50px);
top: 50%;
transform: translate(-50%, -50%);
}
.children2 {
position: absolute;
left: calc(50% + 50px);
top: 50%;
transform: translate(-50%, -50%);
}
2.父元素设置相对定位,子元素设置绝对定位,然后子元素先设置位置,再设置边距(无需知道子元素尺寸)
.parent {
position: relative;
}
.children1 {
position: absolute;
top: 0;
left: -100px;
right: 0;
bottom: 0;
margin: auto;
}
.children2 {
position: absolute;
top: 0;
left: 100px;
right: 0;
bottom: 0;
margin: auto;
}
3.父元素设置相对定位,子元素设置绝对定位,然后子元素先设置位置,再设置边距(需要知道子元素尺寸)
.parent {
position: relative;
}
.children1 {
position: absolute;
left: calc(50% - 50px);
top: 50%;
margin: -50px 0 0 -50px;
}
.children2 {
position: absolute;
left: calc(50% + 50px);
top: 50%;
margin: -25px 0 0 -50px;
}
grid布局
定义一个一行两列的网格,不设置盒子的大小,然后在网格内部设置子元素样式
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.children1 {
justify-self: flex-end;
align-self: center;
}
.children2 {
justify-self: flex-start;
align-self: center;
}
table-cell布局
该布局主要是为了记忆一父一子的用法(父元素设置布局为table-cell,子元素布局为inline-block),在本页面(一父两子)的子元素使用了flex布局使其并排显示,并使其水平居中
.parent {
display: table-cell;
vertical-align: middle;
}