fixed 定位垂直居中

by gothic

HTML

<div class="demo">
		<div class="fixed fixed-left">
        	<span>定位左外侧示例</span>
        </div>
	</div>
    <div class="demo">
		<div class="fixed fixed-left2">
        	<span>定位左内例示例</span>
        </div>
	</div>
    
    <div class="demo f-tac">
		&nbsp;<div class="fixed fixed-center">
        	<span>定位居中示例</span>
        </div>
	</div>
    
    <div class="demo f-tar">
		&nbsp;<div class="fixed fixed-right">
        	<span>定位右外侧示例</span>
        </div>
	</div>
    <div class="demo f-tar">
		&nbsp;<div class="fixed fixed-right2">
        	<span>定位右内侧示例</span>
        </div>
	</div>

CSS

*{padding:0; margin:0;}
	html{min-height:200%; font-size:1em;}
	.f-tal{text-align:left;}
	.f-tac{text-align:center;}
	.f-tar{text-align:right;}
	.demo{height:100px; background:#f0f3f9; max-width:60%; margin:20px auto;}
	.fixed{position:fixed; /*position:absolute;*/ display:inline-block;}
	.fixed span{display:block; position:relative; background:#f60; color:#fff;}
	.fixed-left span{left:-100%;}
	.fixed-center span{left:-50%; margin-left:-8px;}
	.fixed-right2 span{left:-100%; margin-left:-8px;}