利用定位和margin:
1、给要居中盒子的父盒子设置相对定位
2、给要居中的盒子设置固定定位
3、水平left、垂直top都设置为50%
4、利用margin,margin-top和margin-left各设置为负的自身宽高的一半
实例:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bBox {
width: 400px;
height: 400px;
background-color: aqua;
position: relative;
}
.sBox {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="bBox">
<div class="sBox">
</div>
</div>
</body>
</html>
效果图:
利用弹性盒子的方法
1、justify-content:
用于控制弹性元素在主轴上的排列方式
center 元素在主轴上居中。
2、
align-items
控制元素在侧轴上的排列方式。
center 中间对齐
实例:
<style>
.father {
width: 500px;
height: 400px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.son {
width: 100px;
height: 100px;
background-color: sienna;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
<div class="son">
</div>
<div class="so2">
</div>
</div>
</body>
</html>