首页 > 代码库 > 让一个元素在容器中垂直居中的几个方法
让一个元素在容器中垂直居中的几个方法
- 方法一，使用js让元素水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
height:200px;
width:200px;
background:deeppink;
position:absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById("box");
var l=document.documentElement.clientWidth/2-box.offsetWidth/2;
var t=document.documentElement.clientHeight/2-box.offsetHeight/2;
box.style.top=t+‘px‘;
box.style.left=l+‘px‘;
</script>
</body>
</html>
2.使用position属性使元素水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
height:200px;
width:200px;
background:deeppink;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
3.使用弹性盒模型方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height:200px;
width:200px;
display: flex;
background: deeppink;
}
#box2{
margin:auto;
width:50px;
height:50px;
background: deepskyblue;
margin:auto;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
让一个元素在容器中垂直居中的几个方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。