【无标题】css3新增的特性+如何让一个盒子水平垂直居中

作者：System 时间：2024年08月15日分类：所有,css3 字数：937

这篇文章距离上次修改已过241天，其中的内容可能已经有所变动。

CSS3新增特性包括选择器、背景和边框、文字效果、变换、动画、阴影、图像像素操作等。

要使一个盒子水平垂直居中，可以使用CSS3的flex布局或grid布局，或者使用position属性和transform属性。以下是使用flex布局的例子：

.centered-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使容器的高度为视口高度 */
}

.box {
  width: 50px; /* 盒子宽度 */
  height: 50px; /* 盒子高度 */
  background-color: blue; /* 盒子背景色 */
}

<div class="centered-container">
  <div class="box"></div>
</div>

使用position和transform的例子：

.centered-container {
  position: relative;
  height: 100vh; /* 使容器的高度为视口高度 */
}

.box {
  width: 50px; /* 盒子宽度 */
  height: 50px; /* 盒子高度 */
  background-color: blue; /* 盒子背景色 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="centered-container">
  <div class="box"></div>
</div>

在这两个例子中，.box都会在.centered-container内水平垂直居中。

【无标题】css3新增的特性+如何让一个盒子水平垂直居中

评论已关闭

推荐阅读