CSS水平垂直居中问题

CSS水平垂直居中问题

一，内元素是行内元素

.container{
				 height: 300px;
				 background: red;
				line-height: 300px;
				text-align: center;
			}

<div class="container">
    <span>this is text</span>
 </div>

二：内元素是块级元素 ，元素宽高已知

.container{
				 height: 300px;
				 width: 300px;
				 background: red;
				 position: relative;
			}
			.content{
				position: absolute;
				top:50%;
				left: 50%;
				margin-top: -100px;
				margin-left:-100px;
				width: 200px;
				height: 200px;
				background: blue;
				line-height: 200px;
				text-align: center;
			}
			
   <div class="container">
        <div class="content">this is text</div>
     </div>

三，元素是块级元素，但是宽高未知

.container{
				 height: 300px;
				 width: 300px;
				 background: red;
				 position: relative;			 
			}
			.content{
				position: absolute;
				top:0;
				left:0;
				bottom: 0;
				right:0;
				height: 100px;
				width: 100px;
				margin: auto;			 
				background: blue;				
				text-align: center;
			}
			
<div class="container">
        <div class="content">this is text</div>
     </div>