水平居中

text-align:center;
在其父元素上设置 text-align:center；属性 就可以是文字或者图片水平居中

.content{
      text-align:center;
}

margin
给元素设置宽度，利用margin：0 auto；属性进行居中设置;

<style>
    .wrap{
      max-width:600px;
      margin:0 auto;
      background:pink;
    }
  </style>
<div class="wrap">
  <p>你好</p>
  <h1>不样钓鱼</h1>
</div>

水平居中.png

垂直居中

文字不定宽高居中 利用元素属性 上下padding相等 text-align:center;即可实现 实例如下

<style>
    .ct{
      padding:40px 0;
      background:#ccc;
      text-align:center;
    }
  </style>
<div class="ct">
  <p>你好</p>
  <p>你好请继续加油</p>
</div>

效果图如下

不定宽高.png

绝对定位实现居中
定宽定高 利用绝对定位 相对于自身实现居中 里面的文字内容 利用负margin
实例如下

<style>
    html,body{
      height:100%;
    }
    .dialog{
      position:absolute;
      top:50%;
      left:50%;
      margin-left:-150px;
      margin-top:-200px;
      width:400px;
      height:300px;
      box-shadow:0 0 0 3px #ccc;
    }
    .header{
      background:#000;
      color:#fff;
    }
    .header,.content{
       padding:10px;
    }
  </style>
<div class="dialog">
  <div class="header">我是标题</div>
    <div class="content">我是内容</div>
</div>

效果图如下 ：

image.png

还有一种形式是不定宽高
利用css3的属性 transform:translate(-50%,-50%);相等对于自身，也可以达到同样的 效果 范例如下：

<style>
    html,body{
      height:100%;
    }
    .dialog{
      position:absolute;
      top:50%;
      left:50%;
      /* margin-left:-150px;
      margin-top:-200px;
      width:400px;
      height:300px; */
      transform:translate(-50%,-50%);
      box-shadow:0 0 0 3px #ccc;
    }
    .header{
      background:#000;
      color:#fff;
    }
    .header,.content{
       padding:10px;
    }
  </style>
<div class="dialog">
  <div class="header">我是标题dfdfdfddd</div>
  <div>我是标题dfdfdfddd</div>
  <div>我是标题dfdfdfddd</div>
    <div class="content">我是内容</div>
</div>

效果图如下 ：

css3属性实现居中.png

vertical-align实现居中
原理 利用伪元素 为参照基线 实现垂直对齐 很巧妙

• 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片<img>：

<style>
.box{
  width:300px;
  height:200px;
  border:1px solid pink;
  text-align:center;/*水平居中*/
  vertical-align:middle;
}
/*参照物为基线 实现对齐*/
/* .text{
  height:200px;
  background:red;
  width:3px;
  display:inline-block;
  vertical-align:middle;
} */
.box:before{
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
.box img{
  vertical-align:middle;
  background:pink;
}
</style>
<div class="box">
  <!-- <span class="text"></span> -->
  <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
</div>

利用基线为参照物.png

table-cell实现居中
这个居中方式和上面的差不多 利用display:table-cell属性 相当巧妙 使代码相当简洁

<style>
    .box{
      width:300px;
      height:200px;
      border:1px solid pink;
      display:table-cell;
      vertical-align:middle;
      text-align:center;
    }
  </style>
<div class="box">
  <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
</div>

效果图如下

相当简洁.png

display: flex
弹性布局 实现居中

<style>
.space{
  width: 100vw;
  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  
}
body {
  margin: 0;
  background: rgba(0, 0, 0, .23);
}
.earth::after {
  content: '🌏';
  font-size: 185px;
}
</style>
<div class="space">
  <div class="earth"></div>
</div>

效果图 如下 ：

弹性布局居中.png