目录
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>
