css几种水平垂直居中

直接上完整源码,直接复制:

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>垂直水平居中</title>
		<style type="text/css">
			.container {
				position: relative;
				height: 200px;
				border: 2px solid #e4e4e4;
			}
			
			.centerCon {
				width: 200px;
				border: 1px solid #e4e4e4;
				text-align: center;
			}
			
			.center1 {
				position: relative;
				top: 50%;
				margin: auto;
				height: 100px;
				margin-top: -50px;
			}
			
			.center2 {
				position: relative;
				top: 50%;
				left: 50%;
				height: 100px;
				margin-top: -50px;
				margin-left: -100px;
			}
			
			.center3 {
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translateX(-50%) translateY(-50%);
				-moz-transform: translateX(-50%) translateY(-50%);
				-ms-transform: translateX(-50%) translateY(-50%);
				-o-transform: translateX(-50%) translateY(-50%);
				transform: translateX(-50%) translateY(-50%);
			}
			
			.center4 {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				height: 100px;
				margin: auto;
				
			}
			
			    .Center-Container.is-Table { 
			    	display: table; 
			    	width: 100%;
			    	height: 200px;
			     	border: 1px solid #ccc; 
			    }  
			    .is-Table .Table-Cell {  
			      display: table-cell;  
			      vertical-align: middle; 
			    }  
			    .is-Table .Center-Block {  
			      width: 50%;  
			      margin: 0 auto;  
			      border: 1px solid #ccc; 
			    }  
			    .container6{
				    display:flex;
				    justify-content:center;
				    align-items: center;
				}
				
				.center6{
					border: 1px solid #ccc;
				}
		</style>
	</head>

	<body>
		<h3>第一种:</h3>
		<div class="container">
			<div class="centerCon center1">垂直水平居中1</div>
		</div>
		<h3>第二种:</h3>
		<div class="container">
			<div class="centerCon center2">垂直水平居中2</div>
		</div>
		<h3>第三种 变形(Transforms):</h3>
		<div>优点:1. 内容可变高度
			2.代码量少<br />
		缺点:1.IE8不支持<br />
		2.属性需要写浏览器厂商前缀<br />
		3.可能干扰其他transform效果<br />
		4.某些情形下会出现文本或元素边界渲染模糊的现象
		</div>
		<div class="container">
			<div class="centerCon center3">垂直水平居中3</div>
		</div>
		<h3>第四种:</h3>
		<div>
			优点: 1.支持跨浏览器,包括IE8-IE10.<br /> 2.无需其他特殊标记,CSS代码量少 <br />3.支持百分比%属性值和min-/max-属性 <br />4.只用这一个类可实现任何内容块居中 <br />5.不论是否设置padding都可居中(在不使用box-sizing属性的前提下)<br /> 6.内容块可以被重绘。<br /> 7.完美支持图片居中。 <br />缺点: 1.必须声明高度(查看可变高度Variable Height)。<br /> 2.建议设置overflow:auto来防止内容越界溢出。(查看溢出Overflow)。<br /> 3.在Windows Phone设备上不起作用。
		</div>
		<div class="container">
			<div class="centerCon center4">垂直水平居中4</div>
		</div>
		<h3>第五种:</h3>
		<div class="Center-Container is-Table">  
     		<div class="Table-Cell">  
	        	<div class="Center-Block">  
	        		垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5
	        	</div>  
      		</div>  
    	</div>  
    	<h3>第六种:</h3>
		<div class="container container6">  
     		<div class="center6">  
	        	垂直水平居中6
      		</div>  
    	</div>  
	</body>

</html>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。