css关于居中问题
1.文字居中
text-align:center;
line-height:父元素的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding: 0;
}
div{
width:300px;
height:300px;
border:1px solid red;
}
p{
border:1px solid green;
line-height:300px;
text-align:center;
}
</style>
</head>
<body>
<div>
<!--<span>这是一个span</span>-->
<p>这是p标签</p>
</div>
</body>
</html>
2.块级盒子的居中：就是设置外边框margin
关于margin的值的分类：
A.margin:10px 5px 15px 20px;
上外边距是10px
右外边距是5px
下外边距是15px
左外边距是20px
B.margin：10px 5px 15px
上外边距是10px
右外边距、左外边距是5px
下外边距是15px
C.margin：10px 5px
上外边距和下外边距是10px
右外边距和左外边距是5px
D.margin：5px
四个外边距都是5px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding: 0;
}
div {
border: 1px solid red;
width: 600px;
height: 600px;
}
.c2 {
width: 200px;
height: 200px;
margin: 100px auto;
}
.c1 {
margin: auto;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
3.关于图片居中
也是设置width和height来居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding: 0;
}
div {
/*background: url("./imges/loginlogo.png") no-repeat center 0;*/
width: 300px;
height: 300px;
border: 1px solid red;
}
div img { /*因为img是行内块，所以不能用auto*/
width: 100px;
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<img src="loginlogo.png" alt="">
</div>
</body>
</html>
更多精彩
