实现DIV元素水平居中的多种技巧与方法

前提

在面试的时候&＃xff0c;面试官可能会问到如何让一个div水平垂直居中呢&＃xff1f;接下来我将为大家列举常见的几种方法来实现它。

准备

首先准备一个父盒子和一个子盒子&＃xff0c;并给它们添加一下样式&＃xff0c;方便我们观察。

HTML代码

<div class&＃61;"parent"><div class&＃61;"son">div>
div>


CSS代码

.parent {width: 300px;height: 300px;border: 1px solid pink;
}.son {width: 100px;height: 100px;background-color: red;
}


此时的父子盒子排列如下图所示。

我们想要实现的效果如下图所示。

实现方式

1、使用定位加margin-left和margin-top

.parent {width: 300px;height: 300px;border: 1px solid pink;position: relative;
}.son {width: 100px;height: 100px;background-color: red;position: absolute;top: 50%;margin-top: -50px;left: 50%;margin-left: -50px;
}


2、使用定位加transform

.parent {width: 300px;height: 300px;border: 1px solid pink;position: relative;
}.son {width: 100px;height: 100px;background-color: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
}


3、使用定位加margin:auto

.parent {width: 300px;height: 300px;border: 1px solid pink;position: relative;
}.son {width: 100px;height: 100px;background-color: red;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}


4、使用flex布局&＃43;margin:auto

.parent {width: 300px;height: 300px;border: 1px solid pink;display: flex;
}.son {width: 100px;height: 100px;background-color: red;margin: auto;
}


5、使用flex布局&＃43;justify-content和align-items

.parent {width: 300px;height: 300px;border: 1px solid pink;display: flex;justify-content: center;align-items: center;
}.son {width: 100px;height: 100px;background-color: red;
}


6、使用grid布局

.parent {width: 300px;height: 300px;border: 1px solid pink;display: grid;
}.son {width: 100px;height: 100px;background-color: red;justify-self: center;align-self: center;
}


以上就是实现div水平垂直居中的常见方法&＃xff0c;希望对您有帮助&＃xff01;