目录
块元素垂直水平居中
- flex弹性布局:
父容器中加三个属性:
.list{
display: flex;//1
width: 200px;
height: 500px;
/* flex-direction: column; */
border: 1px solid yellow;
flex-wrap: wrap;
justify-content: center;//2
align-items: center;//3
}
2. position定位属性:
(1)使用绝对定位absolute + transform
(先给父元素设置宽高,和相对定位,然后子元素如下:)
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
(2)使用绝对定位 + margin
(先给父元素设置宽高,和相对定位,子元素如下:)
这种方式适合子元素宽高确定的情况,给margin-top设置百分比的大小将不生效,即margin-top: -50%;不能达到垂直居中的效果
.work1 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
(3)使用绝对定位 + margin: auto
(先给父元素设置宽高,和相对定位,子元素如下:)
父子元素宽高都未知时也适用
.work2 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
}
3. 使用table-cell实现
父元素设置宽高,然后display设置成table-cell,子元素display设置成行内块元素;
这种方式需要父元素的宽高都是确定的,才能保证子元素在父元素中垂直水平都居中。
.par-work2 {
height: 500px;
width: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son-work2 {
display: inline-block;
}
4. 使用grid布局
父元素display使用grid布局,并设置高度,子元素单元格内容align-self,justify-self设置垂直和水平居中
这种方式适用于父元素高度确定的情况,有关gird布局的使用可以参考阮一峰老师的文章CSS Grid布局教程
.par-work3 {
display: grid;
height: 500px;
}
.son-work3 {
align-self: center; /*设置单元格内容的垂直位置*/
justify-self: center; /*设置单元格内容的水平位置*/
}
文本垂直水平居中
具体如下:
#app {
width: 100px;
height: 100px;
background-color: pink;/* 添加背景颜色看的清楚些 */
/* 设置文本行高等于父容器的高度 */
line-height: 100px;
/* 设置文本的排列方式为center:居中 注: align:排列 */
text-align: center;
}