div水平垂直居中
程序员文章站
2022-05-01 20:17:19
...
比较常用的三种div水平垂直居中的方法
- div绝对定位水平垂直居中（margin:auto实现绝对定位元素的居中），兼容性：IE7及之前版本不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background-color: red;
//水平垂直居中的重点
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
- css不定宽高水平垂直居中 (常用的)，固定高度页面里的div水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 300px; //必须设置高度
//水平垂直居中的重点
display:flex;
justify-content:center;
align-items:center;
}
div{
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
- 将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现页面里的div水平、垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
//设置宽高可以明显的看效果
height: 500px;
width: 500px;
//水平垂直居中的重点
display: table-cell;
text-align: center;
vertical-align: middle;
}
div{
height: 100px;
width: 100px;
background-color: red;
//水平垂直居中的重点
display: inline-block;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>