css屏幕居中的方法(推荐)

下面我给您详细讲解“CSS屏幕居中的方法(推荐)”的完整攻略。

方法1：使用 Flexbox实现居中

步骤1：设置父元素的display为flex，让子元素可以排列

.container{
  display: flex;
}

步骤2：使用justify-content和align-items设置子元素的居中方式

• justify-content属性是用来设置主轴的对齐方式，可选的值有：flex-start、flex-end、center、space-between、space-around。
• align-items属性是用来设置交叉轴的对齐方式，可选的值有：flex-start、flex-end、center、stretch、baseline。

.container{
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center; /* 交叉轴居中 */
}

示例1：水平居中一个div元素

<div class="container">
  <div>居中的元素</div>
</div>

.container {
  display: flex; 
  justify-content: center;
  align-items: center;
  height: 100vh; /* 注意要设置父元素高度，才能让子元素垂直居中 */
}

示例2：水平垂直居中一个图片

<div class="container">
  <img src="https://picsum.photos/200/300" alt="居中的图片">
</div>

.container {
  display: flex;
  justify-content: center; 
  align-items: center;
  height: 100vh;
}

方法2：使用position和transform实现居中

步骤1：设置绝对定位

.parent {
  position: relative;
}
.child {
  position: absolute; 
  left: 50%; /* 相对于父元素左侧距离为50%的位置 */
  top: 50%; /* 相对于父元素顶部距离为50%的位置 */
}

步骤2：利用transform属性对偏移量进行修正

.parent {
  position: relative;
}
.child {
  position: absolute; 
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 沿着X轴和Y轴分别向左和向上移动50%，即可将元素居中 */
}

示例1：水平垂直居中一个div元素

<div class="parent">
  <div class="child">居中的元素</div>
</div>

.parent {
  position: relative; 
  height: 100vh; /* 注意要设置高度 */
}
.child {
  position: absolute; 
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

示例2：水平垂直居中一个图片

<div class="parent">
  <img class="child" src="https://picsum.photos/200/300" alt="居中的图片">
</div>

.parent {
  position: relative;
  height: 100vh; /* 注意要设置高度 */
}
.child {
  position: absolute; 
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

希望以上内容能够对您有所帮助。