让网页元素居中的常用办法

best666
136 阅读3分钟

在开发过程中，经常需要让元素居中，包括水平及垂直，有的属性设置不生效，故在此做总结。若要使网页元素居中，可以使用几种常用方法：

  1. 使用 CSS 边距：auto 自动快捷方式： 此方法通常用于水平居中块元素。您可以将左右边距设置为自动以实现居中,注意居中的元素需要具有宽度（水平）或高度（垂直）。例如，若要使表单和表格在网站上居中，可以使用以下 CSS 代码：
form, table {
   margin: 0 auto;
}
  1. 使用 CSS 位置和转换：此方法可用于水平和垂直居中元素。可以将父元素的位置设置为相对，将子元素的位置设置为绝对值。然后，可以使用左侧和顶部属性以及转换属性来实现居中。下面是一个示例：
.parent {
  position: relative;
  height: 100px;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用 CSS Flexbox：Flexbox 是一个功能强大的 CSS 布局模块，可用于居中元素。通过将父元素的显示属性设置为 flex，可以使用两端对齐内容和对齐项属性在水平和垂直方向上居中子元素。下面是一个示例：
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 使用 CSS 文本对齐属性：此方法通常用于将块元素中的文本行居中。通过将父元素的文本对齐属性设置为居中，可以将文本居中对齐。例如：
.parent {
  text-align: center;
}
  1. 使用 JavaScript：如果您需要根据窗口大小动态居中元素，则可以使用 JavaScript。您可以计算窗口尺寸和元素尺寸，然后使用计算值设置元素的顶部和左侧属性。下面是一个示例：
const element = document.getElementById('elementId');
const elementWidth = element.offsetWidth;
const elementHeight = element.offsetHeight;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

element.style.position = 'absolute';
element.style.top = `${(windowHeight - elementHeight) / 2}px`;
element.style.left = `${(windowWidth - elementWidth) / 2}px`;
  1. 使用绝对定位和transform属性: 这种方法可以同时水平和垂直居中一个元素。 将父元素的position属性设置为relative，将子元素的position属性设置为absolute。 然后使用left、top属性和transform属性来实现居中。 以下是一个示例：
.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用table和table-cell: 这种方法使用table和table-cell布局来实现居中。 将父元素的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性将子元素垂直居中。 以下是一个示例：
.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}
  1. 使用grid布局: 使用CSS的grid布局可以轻松实现元素的居中。 将父元素的display属性设置为grid，并使用place-content属性将子元素居中。 以下是一个示例：
.parent {
  display: grid;
  place-content: center;
}

这些是一些其他常用的方法来实现网页元素的居中。 根据具体需求和要居中的元素类型，可以选择适合的方法。

avatar
文章
阅读
粉丝