目录
1. 使用Flex布局
2. 使用Grid布局
3.绝对定位 + 负外边距 (必须知晓盒子的具体大小)
4.绝对定位+外边距 auto
5.绝对定位 + transform (无须知晓盒子的具体大小)
1. 使用Flex布局
如何实现：
在父元素上添加：
display: flex;
align-items: center;
justify-content: center;
<style>* {padding: 0;margin: 0;}.parent {display: flex;/* 水平居中 */justify-content: center; /* 垂直居中 */align-items: center;width: 500px;height: 500px;background-color: aqua;}.child {width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>2. 使用Grid布局
如何实现：
在父元素上添加：
display: grid;
place-items: center;
<style>* {padding: 0;margin: 0;}.parent {display: grid;/* 水平和垂直方向都居中对齐 */place-items: center;width: 500px;height: 500px;background-color: aqua;}.child {width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>3.绝对定位 + 负外边距 (必须知晓盒子的具体大小)
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。
如何实现：
在父元素上添加：
position: relative;
在子元素上添加：
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; //子元素高度的一半
margin-left: -100px; //子元素宽度的一半
<style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 50%;left: 50%;margin-top: -100px;//子元素高度的一半margin-left: -100px;//子元素宽度的一半width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>4.绝对定位+外边距 auto
将盒子的上下左右定位全部设置为0，同时设置外边距自适应
如何实现：
在父元素上添加：
position: relative;
在子元素上添加：
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
<style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>
5.绝对定位 + transform (无须知晓盒子的具体大小)
使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小
如何实现：
在父元素上添加：
position: relative;
在子元素上添加：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
<style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 200px;height: 200px;background-color: pink;}</style>
<body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>
)
