[分享]css中div居中对齐

在网页中，我们经常会用到div标签来划分网页的不同部分，而对于div的居中对齐问题，我们则可以使用CSS来实现。本文将介绍三种常用的div居中对齐方法。 第一种方法是使用margin属性来实现，比如将...

在网页中，我们经常会用到div标签来划分网页的不同部分，而对于div的居中对齐问题，我们则可以使用CSS来实现。本文将介绍三种常用的div居中对齐方法。
第一种方法是使用margin属性来实现，比如将div的左右margin都设置为auto，就可以让div水平居中对齐。代码如下：

div {
  width: 200px;
  height: 200px;
  background: #ccc;
  margin: 0 auto;
} 

第二种方法是使用flex布局来实现，通过设置父元素的display属性为flex，再通过justify-content和align-items属性来实现水平居中和垂直居中对齐。代码如下：

.container {
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}
div {
  width: 200px;
  height: 200px;
  background: #ccc;
} 

第三种方法是使用绝对定位来实现，通过对div的父元素设置position属性为relative，再将div设置为绝对定位，并通过left和top属性来实现水平和垂直居中对齐。代码如下：

.container {
  position: relative;
}
div {
  width: 200px;
  height: 200px;
  background: #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%); /*使div完全居中*/
} 

以上就是三种常用的div居中对齐方法，根据实际情况选择合适的方法即可。