HTML设置页⾯居中的五种⽅式<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页⾯居中的⼏种写法</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
#info{width:80%; height: 800px; background-color: pink;}
/* 第1种：*/
#info{margin: 0px auto;}
/* 第2种：内边距，后⾯的width和overflow必须写*/
body{
padding: 0 10%;
width: 100%;
overflow: hidden;
}
/* 第3种：absolute和relative都可以 */
#info{text align center
position: absolute;
left: 10%;
}
/* 第4种：⾏内块级*/
body{
text-align: center;
}
#info{
display: inline-block;
}
第5种：弹性盒⼦的主轴对齐*/
/*body{
display:flex;
justify-content:center;
}
</style>
</head>
<body>
<div id="info"></div>
</body>
</html>

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