共计 606 个字符,预计需要花费 2 分钟才能阅读完成。
超级居中:place-items: center
父元素,首先指定 grid 作为 display 办法,而后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justify-items 的疾速办法。通过将其设置为 center,align-items 和 justify-items 都将设置为 center。
.parent {
display: grid;
place-items: center;
}
flex
如果您想让您的框填充到它们的 <flex-basis> 大小,放大到更小的尺寸,但不拉伸以填充任何额定的空间
.parent {display: flex;}
.child {flex: 0 1 150px;}
换到下一行时拉伸并填充空间,请将 <flex-grow> 设置为 1
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
定位
.parent {position: relative}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
设置为行内块元素
.parent {
height:100px;
text-align: center;
}
.child {
display:inline-block;
line-height:100px;
}
其余能实现不罕用的:table 布局。。。
正文完