css实现垂直水平居中
2021-03-12 16:27
标签：垂直 实现 orm osi isp ali transform 水平居中 translate 1.通过flex布局 2.transferm+margin css实现垂直水平居中 标签：垂直 实现 orm osi isp ali transform 水平居中 translate 原文地址：https://www.cnblogs.com/lss0322/p/12826297.html 1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 title>css垂直水平居中title>
6 style>
7 html, body {
8 margin: 0;
9 padding: 0;
10 }
11 .main {
12 height: 100vh;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 }
17 .content {
18 width: 300px;
19 height: 300px;
20 background: rgb(10, 75, 136);
21 }
22 style>
23 head>
24 body>
25 div class="main">
26 div class="content">div>
27 div>
28 body>
29 html>
1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 title>css垂直水平居中title>
6 style>
7 html, body {
8 margin: 0;
9 padding: 0;
10 height: 100%;
11 }
12 .content {
13 width: 300px;
14 height: 300px;
15 background: rgb(10, 75, 136);
16 margin: 0 auto;
17 position: relative;
18 top: 50%;
19 transform: translateY(-50%);
20 }
21 style>
22 head>
23 body>
24 div class="content">div>
25 body>
26 html>
下一篇：ajax