您的位置：首页 > Web前端 > CSS

使用css实现元素水平垂直居中

2019-06-25 16:49 176 查看

在做弹窗组件时，需要实现元素水平垂直居中，总结记录一下。（有借鉴）

1、使用position:absolute，绝对定位实现

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
height:500px;
width: 100%;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
}
.left{
width: 200px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="left">qwe</div>
</div>
</body>
</html>

绝对定位到屏幕的一半，是相对于左上角的坐标点，还需要设置上移height的50%，左移width的50%。父子关系的话，需要给父元素设置position: relative，子元素是相对于父元素绝对定位的。

2、transform转换（不定宽高元素实现元素水平垂直居中）

.left{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background: green;
}

定位方法前提是宽度和高度已知，当两者未知时，使用transform，但是，但是，这种方法可能会有文字模糊的问题，当像素是非整数时。并且，在父元素使用transform，会限制positon:fixed，不能固定变成跟absolute一样。
可以看下这篇文章，详细介绍了transform的影响：CSS3 transform对普通元素的N多渲染影响

3、弹性布局

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
width: 100%;
height: 500px;
display: flex;
justify-content: center; /*水平居中 主轴上的对齐方式*/
align-items: center; /*垂直居中 交叉轴上的对齐方式*/
background: yellow;
}
.left{
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
123
<p>qwe</p>
</div>
</div>
</body>
</html>

是在父元素上进行设置的，对于文本居中也有效。
flex浏览器兼容

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航