div居中用css怎么写

要使一个div元素在其父容器中水平和垂直居中，可以使用多种CSS方法。以下是几种常见的方法：

方法一：使用Flexbox

Flexbox是一种现代的布局模块，可以轻松实现元素的居中对齐。

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 确保父容器有高度 */
}

.child {
  /* 子元素的样式 */
}

方法二：使用Grid布局

CSS Grid布局也是一种强大的布局工具，可以实现复杂的网格布局。

.parent {
  display: grid;
  justify-content: center; /* 水平居中 */
  align-content: center; /* 垂直居中 */
  height: 100vh; /* 确保父容器有高度 */
}

.child {
  /* 子元素的样式 */
}

方法三：使用绝对定位和transform

这种方法适用于需要兼容旧版浏览器的情况。

.parent {
  position: relative;
  height: 100vh; /* 确保父容器有高度 */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 子元素的样式 */
}

方法四：使用line-height和text-align

这种方法适用于单行文本的居中。

.parent {
  text-align: center; /* 水平居中 */
  line-height: 100vh; /* 垂直居中 */
  height: 100vh; /* 确保父容器有高度 */
}

.child {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  /* 子元素的样式 */
}