html中实现元素居中的⼏种⽅法
第⼀种
使⽤到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作⽤，如果想使⽤在img元素上，就注意下⾯的display设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
width: 400px;
height: 400px;
background-color: #aaa;
display: table;/*⽗元素设置表格属性*/
text-align: center;
}
.main span{
display: table-cell;/*img设置成表格元素属性*/
vertical-align: middle;/*两个display设置后这个属性就起作⽤*/
}
</style>
</head>
<body>
<div class="main">
<span><img src="1.jpg"alt="/"width="150px"></span>
</div>
</body>
</html>
注意:display:table-cell，这是对类似⽂字元素起作⽤的，所以包含在span标签内
*对于⽂字居中也h1,span,p等类似⽂字标签都可以这样设置居中
第⼆种
这种⽅法同样适⽤于img，只需将child换成img就⾏，不再需要span了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
width: 400px;
height: 400px;
background-color: #aaa;
position: relative;
}
.
child{
css设置文字垂直居中width: 200px;
height: 200px;
background-color:rgb(39,40,34);
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="child"></div>
</div>
</body>
</html>
第三种
弹性布局⽅式垂直居中（推荐使⽤）
.main{/*给⽗容器设置*/
display:flex;
align-items:center;/*所有⼦元素都垂直居中了*/
}
第四种
定位居中
/*省略了尺⼨的设置，侧重了重点，读者可以把部分内容加上*/    .main{/*⽗元素*/
position: relative;
}
.child{/*⼦元素*/
position: absolute;
top: 50%;
left: 50%;
margin-left: /*负的⾃⾝宽度⼀半*/
margin-top: /*负的⾃⾝⾼度⼀半*/
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。