CSS 水平垂直居中的方法
CSS 水平垂直居中一直是一个值得讨论的问题，面试的时候也经常被问到。这里做一个小总结。
在实现居中的时候要考虑
- 元素的宽高是否确定
- 元素是行内还是块级元素等
水平居中
利用块级元素撑满父级元素的特点，设置子元素的 margin:0 auto;平分左右空间
水平垂直居中
HTML文件模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 这里是公共样式 */
.wraper {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
.size {
width: 100px;
height: 100px;
}
/* 这里是公共样式 */
</style>
</head>
<body>
<div class="wraper">
<div class="box size">hello!</div>
</div>
</body>
</html>
居中元素宽高确定
1. absolute + margin(负)
.wraper {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
2. absolute + margin auto
.wraper {
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
3. absolute + calc
.wraper {
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
居中元素宽高不确定
4. absolute + transform
.wraper {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5. flex
.wraper {
display: flex;
justify-content: center;
align-items: center;
}
6. grid
.weaper {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
7. lineheight
单行/N行文本对齐
.box {
text-align: center;
line-height: 300px;
}
.box {
text-align: center;
line-height: 50px;
/* 文本为6行 */
}
对于行内元素
.wraper {
line-height: 300px;
text-align: center;
}
.box {
display: inline;
vertical-align: middle;
}
8. css-table
.wraper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
9. table
<table>
<tbody>
<tr>
<td class="wraper">
<div class="box">123123</div>
</td>
</tr>
</tbody>
</table>
.wraper {
text-align: center;
}
.box {
display: inline-block;
}
10. writing-mode
不是特别熟悉，先做个记录
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！