CSS垂直水平居中方式大全(二)----水平垂直居中

最新推荐文章于 2024-03-27 20:04:50 发布

码农致富

最新推荐文章于 2024-03-27 20:04:50 发布

阅读量2.1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/u011781521/article/details/78686620

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1.利用绝对定位+transform(不固定宽高水平垂直居中)

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#box {
			    position: relative;
			    width: 500px;
			    height: 400px;
			    background: #faebcc;
			}
			#child {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    transform: translate(-50%);
			}
		</style>
	</head>
	<body>

				<div id="box">
				    <div id="child">Hello world</div>
				</div>
		
	</body>
</html>

效果:

2.利用绝对定位+margin(.child宽高固定)

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#box {
			    position: relative;
			    width: 500px;
			    height: 400px;
			    background: #faebcc;
			}
			#child {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    width: 100px;
			    height: 80px;
			    background: #999999;
			    margin: -40px 0 0 -50px;/*负值取宽、高的一半*/
			}
		</style>
	</head>
	<body>

				<div id="box">
				    <div id="child">Hello world</div>
				</div>
		
	</body>
</html>

效果:

3.利用定位与margin:auto

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#box {
			    position: relative;
			    width: 500px;
			    height: 400px;
			    background: #faebcc;
			}
			#child {
			    position: absolute;    
			    width: 100px;
			    height: 80px;
			    background: #DDDDDD;
			    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;
			}
		</style>
	</head>
	<body>

				<div id="box">
				    <div id="child">Hello world</div>
				</div>
		
	</body>
</html>

效果:

4.利用display:table-cell

CSS中有一个用于竖直居中的属性vertical-align，但只有当父元素为td或者th时，这个vertical-align属性
才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的，设置块级元素的
display类型为table-cell，激活vertical-align属性，但display:table-cell存在兼容性问题，
所以这种方法没办法跨浏览器兼容。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#box {
			    display: table-cell;
			    vertical-align: middle;/*垂直*/
			    text-align: center;/*水平*/
			    width: 500px;
			    height: 400px;
			    background: #faebcc;
			}
			#child {
			    display: inline-block;
			    width: 100px;
			    height: 80px;
			    background: #f65f57;
			}
		</style>
	</head>
	<body>

				<div id="box">
				    <div id="child">Hello world</div>
				</div>
		
	</body>
</html>

效果:

5.页面居中

方法一:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			#child {
		        width:100px;
		        height:100px;
		        background:aqua;
		        position:absolute;
		        top:0;
		        left:0;
		        right:0;
		        bottom:0;
		        margin:auto;
			}
		</style>
	</head>
	<body>

	           <div id="child">Hello world</div>
		
	</body>
</html>

效果:

方法二:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
		  #child {
	            width:100px;
	            height:100px;
	            background:aqua;
	            position:absolute;
	            top:50%;
	            left:50%;
	            margin-left:-50px;
	            margin-bottom:-50px;
		  }
		</style>
	</head>
	<body>

	<div id="child">Hello world</div>
		
	</body>
</html>

效果:

方法三:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
		  #child {
	            background:aqua;
	            position: absolute; 
	            width: 6em; 
	            height: 6em;
	            top: calc(50% - 3em); 
	            left: calc(50% - 3em); 
		  }
		</style>
	</head>
	<body>

	          <div id="child">Hello world</div>
		
	</body>
</html>

效果:

方法四:

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
		  #child {
			background: #999999;
		        position: absolute; 
		        top:50%;
		        left:50%;
		        transform:translate(-50% -50%);
		  }
		</style>
	</head>
	<body>

		<div id="child">Hello world</div>
		
	</body>
</html>

效果:

码农致富

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS垂直水平居中方式大全(二)----水平垂直居中

1.利用绝对定位+transform(不固定宽高水平垂直居中)示例: 居中 #box { position: relative; width: 500px; height: 400px; background: #faebcc; } #child { position: a
复制链接

扫一扫