居中

水平居中

1. 行内元素

设置父元素：text-align:center

<style>
  .text-center{
    text-align: center
  }
</style>
<div class="text-center">
  <span>我是行内元素我要居中显示</span>
</div>

2. 定宽块状元素

设置margin-left和margin-right为auto

<style>
  div{
    border:1px solid red;
    width:200px;
    margin:20px auto;
  }
</style>
<div>我是定宽块状元素，我要水平居中显示。</div>

3. 不定宽块状元素

与行内元素一样

垂直居中

1.行内元素

line-height

水平垂直居中

定宽块状

<style type="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;
    }

    .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
    </style>
<div class="box">
  <div class="box1"></div>
</div>