一、使用flex弹性布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>flex</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#father{
display: flex;
justify-content: center;
align-items: center;
background-color: black;
height:100vh;
}
#son{
width: 50%;
height: 50%;
background-color: white;
}
</style>
<body>
<div id="father"><div id="son"></div></div>
</body>
</html>
二、使用transform变形
将子元素的宽和高设置为百分数,如宽设置为 80%,则需要向 X 轴偏移 10%;那么 translateX 为10/80 = 0.125,即 12.5%;如果高设置为 60%,则需要向 Y 轴偏移 20%,那么 translateY 为20/60 = 33%,即子元素需要设置 transfrom:translate(12.5%,33%)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>transform</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#father{
background: black;
height:100vh;
}
#son{
width: 50%;
height: 50%;
background: white;
transform: translate(50%,50%);
}
</style>
<body>
<div id="father"><div id="son"></div></div>
</body>
</html>
三、使用position定位
将父元素设置为 positon:fixed,然后上下左右都为 0;使其填满整个屏幕;
子元素也设置为 positon:fixed,然后上下左右都为 0;margin 设置为 auto,实现水平垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>position</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#father{
background: black;
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
}
#son{
width: 50%;
height: 50%;
background: white;
margin:auto;
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
<body>
<div id="father"><div id="son"></div></div>
</body>
</html>
四、transform 与 position 结合
将父元素设置为 positon:fixed,然后上下左右都为 0;使其填满整个屏幕
子元素也设置为 positon:fixed,然后上下各设为 50%;即位置到达中心点,但是元素也有高宽度,所以整体就偏移了,应当上下都回退25%的距离,即设置为 transform:translate(-50%,-50%)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>position-transform</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#father{
background: black;
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
}
#son{
width: 50%;
height: 50%;
background: white;
position:fixed;
left:25%;
top:25%;
transform: translateY(-50%,-50%);
}
</style>
<body>
<div id="father"><div id="son"></div></div>
</body>
</html>