a.元素居中对齐（要水平居中对齐一个元素(如 <div>)）
 margin: auto;
 width: 50%;
 使用margin必须和width一起搭配使用
b.文本居中对齐
text-align: center;
c.图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中对齐</title>
</head>
<style>
    .div1 {
        width: 50%;
        margin: auto;
        background-color: #FFA500;
        padding: 15px;
        text-align: center;
    }

    .div2 {
        width: 50%;
        height: 400px;
        background-color: #FFA500;
    }

    img {
        display: block;
        margin: auto;
    }
</style>
<body>
<div class="div1">
    <p>世界那么大</p>
</div>

<div class="div2">
    <img src="demo.png" width="200px" height="200px" alt="">
</div>
</body>
</html>