如何使一个盒子水平垂直居中
在日常的网页开发过程中，我们经常需要让一个盒子在另外一个盒子中水平垂直居中对齐，下面介绍一些常见的简单可行的方法
1.定位 + 负margin
<style>
.parent {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.child {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
2.定位 + margin:auto;
<style>
.parent {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.child {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
3.定位 + transform
<style>
.parent {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.child {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
4.定位 + calc
<style>
.parent {
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
.child {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
top: calc(50% -50px);
left: calc(50% -50px);
}
</style>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
5.利用 display：flex;
<style>
.parent {
width: 500px;
height: 500px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
6.利用 display:table-cell
<style>
.parent {
width: 500px;
height: 500px;
background-color: pink;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
background-color: skyblue;
display: inline-block;
}
</style>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
7.利用 display:grid
<style>
.parent {
width: 500px;
height: 500px;
background-color: pink;
display: grid;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
background-color: skyblue;
align-self: center;
justify-self: center;
}
</style>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
