前端面试之CSS居中

子元素宽高已知的情况

1. 使用margin属性水平居中

.parent {
  width: 500px;
  height: 500px;
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 0 auto; /* 水平居中 */
}

2. 使用定位与margin属性居中

.parent {
				position: relative;
				width: 500px;
				height: 500px;
			}
			.child {
				width: 100px;
				height: 100px;
				background-color: blue;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -50px;  /*减去子元素的一半*/
				margin-left: -50px;  /*减去子元素的一半*/
			}

3.使用定位与方法居中

.parent {
				position: relative;
				width: 500px;
				height: 500px;
			}
			.child {
				width: 100px;
				height: 100px;
				background-color: blue;
				position: absolute;
                top: calc(50% - 50px);
                left: calc(50% - 50px);
			}

子元素宽高未知的情况

1.使用绝对定位和transform属性

    .parent{
            position: relative; 
            width: 500px;
            height: 500px;
        }
        .child{
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 水平和垂直居中 */
        }

2. 使用flexbox布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
}
.child {
  background-color: blue;
  /* 宽高未知，flexbox 自动处理 */
}

3. 使用grid布局

.parent {
  display: grid;
  place-items: center;
  width: 500px;
  height: 500px;
}
.child {
  background-color: blue;
  /* 宽高未知，grid 自动处理 */
}

.parent {
				display: grid;
				width: 500px;
				height: 500px;
			}
			.child {
				align-self: center;
				justify-self: center;
				background-color: blue;
			}

4. 使用table-cell布局

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 500px;
  height: 500px;
}
.child {
  display: inline-block;
  background-color: blue;
  /* 宽高未知 */
}