本节主要介绍了几种常见的CSS设置div水平垂直居中的方法
方法1:
子绝父相,利用left,top属性距父盒子偏移50%,但是因为子盒子自身是有宽度的,所以要将子盒子往相反方向偏移自身的一半。
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: bisque;
}
.container {
width: 300px;
height: 300px;
background-color: green;
margin: auto;
margin-top: 50px;
position: relative;
}
.box {
width: 200px;
height: 100px;
background-color: aquamarine;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
}
</style>
<div class="container">
<div class="box"></div>
</div>
方法2:
利用CSS3中的transform属性。 思想同上,transform: translate(-50%,-50%);
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: bisque;
}
.container {
width: 300px;
height: 300px;
background-color: green;
margin: auto;
margin-top: 50px;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<div class="container">
<div class="box"></div>
</div>
方法3:
通过position定位实现,通过将子元素上下左右的偏移值全设为0,再利用margin:auto;
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: bisque;
}
.container {
width: 300px;
height: 300px;
background-color: green;
margin: auto;
margin-top: 50px;
position: relative;
}
.box {
width: 200px;
height: 100px;
background-color: aquamarine;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
</style>
<div class="container">
<div class="box"></div>
</div>
方法4:
flex布局 父元素 display:flex 子元素 margin: auto
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: bisque;
}
.container {
width: 300px;
height: 300px;
background-color: green;
margin: auto;
margin-top: 50px;
display: flex;
}
.box {
width: 200px;
height: 100px;
background-color: aquamarine;
margin: auto;
}
</style>
<div class="container">
<div class="box"></div>
</div>
方法5:
flex布局 父元素 display:flex; justify-content:center; align-items:center;
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: bisque;
}
.container {
width: 300px;
height: 300px;
background-color: green;
margin: auto;
margin-top: 50px;
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.box {
width: 200px;
height: 100px;
background-color: aquamarine;
}
</style>
<div class="container">
<div class="box"></div>
</div>