本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
先准备个测试模板
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg{
width:100%;
height:100%;
position: fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color: lightblue;
}
.text{
background:#fff;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="bg">
<span class="text">单行文字水平垂直居中</span>
</div>
</body>
</html>
内联元素，没有设置宽高 1、自身水平垂直居中 设置padding （左右方向有效，上下方向无效）
2、在容器内水平垂直居中 方法一：
[HTML] 纯文本查看 复制代码 position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
方法二：flex布局（适合移动端
[HTML] 纯文本查看 复制代码 display: flex;
justify-content: center;
align-items: center;
内联块元素，没有设置宽高 1、自身水平垂直居中 设置padding
[HTML] 纯文本查看 复制代码 display:inline-block;
padding:30px 20px;
2、在容器内水平垂直居中 [HTML] 纯文本查看 复制代码 position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
块元素，没有设置宽高 1、自身水平垂直居中 [HTML] 纯文本查看 复制代码 display:block;
padding:20px 0;
text-align: center;
2、在容器内水平垂直居中
[HTML] 纯文本查看 复制代码 position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
设置position为absolute，相当于把元素变为了inline-block，因此宽度没有占据整行 如果需要的话，可以手动添加width
[HTML] 纯文本查看 复制代码 position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
指定容器宽高，内联块 [HTML] 纯文本查看 复制代码 display:inline-block;
width:200px;
height:100px;
1、自身水平垂直居中 单行文字可以使用line-height
[HTML] 纯文本查看 复制代码 text-align:center;
line-height:100px;
多行文字 [HTML] 纯文本查看 复制代码 display: flex;
justify-content: center;
align-items: center;
这种是将多行文字看做一个整体水平垂直居中，因此不是每一行文字都是水平居中效果
2、在容器内水平垂直居中
[HTML] 纯文本查看 复制代码 position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
或者 [HTML] 纯文本查看 复制代码 position: absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
指定容器宽高，块元素 1、自身水平垂直居中 单行文字
[HTML] 纯文本查看 复制代码 display:block;
width:200px;
height:100px;
text-align:center;
line-height:100px;
多行文字
[HTML] 纯文本查看 复制代码 display: flex;[/font][/color][/align] justify-content: center;
align-items: center;
2、在容器内水平垂直居中
[HTML] 纯文本查看 复制代码 position: absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
或者
[HTML] 纯文本查看 复制代码 position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
如果单纯水平居中，可以控制margin
[HTML] 纯文本查看 复制代码 margin:0 auto;
| 
发表于 2020-3-17 18:40:19
