likes
comments
collection
share

css居中方式

作者站长头像
站长
· 阅读数 30

超级居中: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布局。。。