css实现垂直水平居中
1.通过flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css垂直水平居中</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 300px;
height: 300px;
background: rgb(10, 75, 136);
}
</style>
</head>
<body>
<div class="main">
<div class="content"></div>
</div>
</body>
</html>2.transferm+margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css垂直水平居中</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.content {
width: 300px;
height: 300px;
background: rgb(10, 75, 136);
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html> 相关推荐
gufudhn 2020-06-12
STPace 2020-02-17
libowen0 2014-05-30
Phoebe的学习天地 2019-07-01
Phoebe的学习天地 2019-07-01
王为仁 2019-07-01
WebVincent 2019-07-01
王景迁 2019-07-01
libowen0 2019-06-30
淡风wisdon大大 2019-06-28
冰蝶 2018-08-17
qiupu 2019-06-28
Dorissun 2016-09-22
hellowzm 2020-10-12
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
xiaohuli 2020-02-12
liusure0 2020-01-11