CSS - 将div居中放置于页面中心

在Web设计中，有时需要将一个<div>标签居中放置于页面中心。在CSS中，可以使用以下方法实现。

方法1: 使用Flexbox布局

使用Flexbox布局可以轻松将元素居中放置。

HTML

<div class="container">
  <div class="center">内容</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设定高度为100%视窗高度 */
}

.center {
  text-align: center;
}

说明

• .container中设置了display: flex，将其转换为一个Flex容器，并使用justify-content: center和align-items: center属性将其子元素水平和垂直居中。
• .container的高度设置为视窗高度100%（height:100vh），其目的是为了让容器占据整个屏幕，确保其子元素一定在屏幕中央。

方法2: 使用position属性

HTML

<div class="center">内容</div>

CSS

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

说明

• .center的position属性被设置为absoulute，这意味着它不会受到外层元素的影响进行定位， 而是将其定位到页面的某个位置。
• 使用top: 50%和left: 50%属性将子元素移动到视窗的中心。
• 使用transform: translate(-50%, -50%)将子元素的中心点移动到视窗的中心。