div+css实现文本居中和图片居中

1、纯文本居中

   #left{
       width: 100%;
       height:200px;
       background: pink;
       text-align: center;
      line-height: 200px;
   }

<div id="left">我已亭亭，不忧亦不俱-----------------《莲的心事》</div>

---

2、图片居中

形如：<div><img src="" ></div>

第一种，div不定宽高，图片确定或不定宽高，直接给div加水平居中

div{text-align: center;}

 

第二种 ,div和图片大小均固定

div{

       display: table-cell;
      text-align: center;
     vertical-align: middle;

}

第三种，大小均可不写。flex弹性布局，（强推，超好用，三列布局啥的也适用）

div{

      display: flex;
      justify-content:center;
      align-items: center;

}

 

 /*第一种，div不定宽高，图片确定或默认宽高，直接给div加水平居中*/
   #first{
   	background:black; 
   	text-align: center;
   }
    #first .img{	}

<div id="first">
    	<img src="../../a.jpg"  width="300px" height="200px"/>
</div>



  /*第二种div和图片大小均固定，使用表格*/
  #second{
  	display: table-cell;
  	background: red;
  	height: 600px;
  	width: 800px;
  	text-align: center;
    vertical-align: middle;
  }
  #second .img{}

<div id="second"><img src="../../a.jpg" width="300px" height="200px"/> </div>


//使用弹性布局
  #third{
  	width: 100%;
  	height: 800px;
  	background: yellow;
  	display: flex;
  	justify-content:center;
  	align-items: center;
  }
  #third .img{/*flex: 1;*/ }

<div id="third"><img src="../../a.jpg"/> </div>