CSS-盒子居中
2022-06-08 本文已影响0人
测试探索
image.png
练习
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="div1">
test测试
</div>
</body>
</html>
index.css
div{
width: 200px;
height: 200px;
overflow: hidden;
margin-left: 20px;
}
#div1{
background-color: yellow;
margin-top: 20px;
margin-bottom: 20px;
padding-right: 20px;
box-sizing: border-box;
/*文字水平居中*/
text-align: center;
/*文字垂直居中*/
line-height: 200px;
/*对象居中*/
margin: 20px auto;
}
*{
/*margin: 0px 0px 0px 0px;*/
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
image.png
