CSS两种水平垂直居中示例介绍

ttx9n · 发表于 2013-9-16 15:12:46

水平垂直居中在css中的应用想必大家已经很熟悉。尽管如此，在本文也要为大家介绍两种不错的实现方法，如果你想巩固一下，那还是值得一看的第一种：将固定大小的div框相对窗口水平垂直居中，改变浏览器窗口大小时，依然保持水平垂直居中；

复制代码代码如下:
<!doctype html>
<html lang="en">
<head>
<title>水平垂直居中</title>
<meta charset="utf-8">
<style type="text/css">
.out{width: 0px;
height: 0px;
position: absolute;
left: 50%;
top: 50%;
}
.in{height: 300px;
width: 300px;
position: absolute;
left: -150px;
top: -150px;
background-color: #999;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>

第二种：让一个自适应大小的div相对浏览器窗口水平垂直居中

复制代码代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>自适应剧中</title>
<style type="text/css">
.middle{
height: 300px;
width: 300px;
border: 1px solid;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.in{
background-color: red;
height: auto;
width: auto;
min-width: 0px;
min-height: 0px;
display: inline;
}
</style>
</head>
<body>
<div class="middle">
<div class="in">内容自适应水平垂直居中</div>
</div>
</body>
</html>

4r8oiin60 · 发表于 2022-9-11 07:07:59

谢谢下载来看看

uj9lpc · 发表于 2022-9-21 05:40:50

而快乐你们快乐马年快乐

白狐软件 · 发表于 2022-10-9 09:33:02

女生看了弄丢了卡萨诺的卡洛斯

btbhs8t · 发表于 2022-12-27 09:01:39

刷屏刷屏刷屏

shw5ovr · 发表于 2022-12-29 03:48:05

天天源码社区论坛

额呵呵 · 发表于 2023-5-15 22:02:44

vcxvcxv

Anthonylam · 发表于 2023-6-11 20:17:30

先把创新班才能下班才能下班

q215357618 · 发表于 2023-6-21 12:33:43

下载来瞧瞧

fzyzy · 发表于 2023-6-30 16:03:08

快更新啊，我擦

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS两种水平垂直居中示例介绍

相关帖子