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{
            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;
             600px;
            height: 600px;
        }
        .c2 {
             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;*/
             300px;
            height: 300px;
            border: 1px solid red;
        }
        div img { /*因为img是行内块，所以不能用auto*/
             100px;
            margin-left: 100px;
            margin-top: 100px;
        }

    </style>
</head>
<body>
<div>
    <img src="loginlogo.png" alt="">
</div>
</body>
</html>