HTML5+CSS3-基础09-盒子水平和垂直居中
利用position和translate
利用子绝父相父元素和子元素进行定位,然后用transform的translate
绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%);
当前div的父级添加相对定位(position: relative;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
<style>
.father{
width: 400px;
height: 400px;
background-color: blue;
position:relative;
top: 0;
left: 0;
}
.son{
width: 200px;
height: 200px;
background-color: yellow;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
利用position和margin
绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
<style>
.father{
width: 400px;
height: 400px;
background-color: blue;
position:relative;
top: 0;
left: 0;
}
.son{
width: 200px;
height: 200px;
background-color: yellow;
position:absolute;
top: 50%;
left: 50%;
margin:-100px -100px;
}
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
利用父元素的flex布局
父元素设置flex布局,然后alig-items:center(垂直居中); justify-content:center(水平居中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
<style>
.father{
width: 400px;
height: 400px;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.son{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
利用display:table-cell
父元素设置:
display: table-cell;
vertical-align: middle;
text-align: center;
子元素设置: display:inline-blaock;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
<style>
.father{
width: 400px;
height: 400px;
background-color: blue;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son{
width: 200px;
height: 200px;
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">sfs</div>
</div>
</body>
</html>
对子盒子实现绝对定位,利用calc计算位置
父元素设置:
position: relative;
子元素设置:
position: absolute;
left:calc((500px - 200px)/2);
top:calc((120px - 50px)/2);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
<style>
.father{
width: 400px;
height: 400px;
background-color: blue;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: calc((400px - 200px)/2);
left: calc((400px - 200px)/2);
}
</style>
</head>
<body>
<div class="father">
<div class="son">sfs</div>
</div>
</body>
</html>
内容仅供学习参考,若有错误欢迎大家指正----WUCASE