垂直水平居中

最新推荐文章于 2023-09-30 13:11:25 发布

sly94

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量284

点赞数

本文链接：https://blog.csdn.net/sly94/article/details/53097870

版权

一：水平居中方式：

1.margin:0 auto;水平居中，设置块元素的居中。必须要设置父元素的width，并且元素不能设置成position:absolute;

<span style="font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.parent{
				width: 300px;
				height: 200px;
				margin: 0 auto;
				color: #FFF;
				background: #548CE5;
			}
			
		</style>
	</head>
	<body>
		<div class="parent">
			parent所在的div盒子在浏览器中水平居中
		</div>
	</body>
</html>
</span>

2.text-align:center水平居中

思路：主要用在内联元素上，如span img等等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.parent{
				width: 300px;
				height: 200px;
				text-align: center;
				background: #548CE5;
				color: #FFF;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<span>我是在parent盒子内部水平居中</span>
		</div>
	</body>
</html>

二：垂直居中

1.单行文字垂直居中line-height

2.不知道高度多行文字 display:table-cell;vertical-align:middle;

3.知道高度：设置子元素position:absolute;top:50%;margin-top:-height/2;

实例：

1：固定宽高的div水平居中

思路：父元素position设置为relative;子元素给定宽高，子元素position设置为absolute
然后设置top:50%;left:50%;margin-top:-height/2;margin-left:-width/2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			.parent1{
				width: 200px;
				height: 200px;
				background: #548CE5;
				<span style="color:#ff0000;">position: relative;</span>
			}
			.child1{
				position: absolute;
				width: 50px;
				height: 50px;
				<span style="color:#ff0000;">top:50%;
				margin-top: -25px;</span>
				background: #E7441F;
				<span style="color:#ff0000;">left: 50%;
				margin-left: -25px;</span>
				
			}
		</style>
	</head>
	<body>
		<div class="parent1">
			<div class="child1">child1</div>
		</div>
	</body>
</html>

2.不固定宽高div垂直水平居中

方式一：显示父元素为table；子元素display；table-cell；text-align:center;vertical-middle;实现垂直水平居中

优点：父元素可以动态的改变宽高（table元素的特性）

缺点：IE8以下不支持

<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.parent1{
				width: 300px;
				height: 300px;
				display: table;
				background-color: #548CE5;
			}
			.child1{
				<span style="color:#ff0000;">vertical-align: middle;
				text-align: center;
				display: table-cell;</span>
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="parent1">
			<div class="child1">child1child1</div>
		</div>
	</body>
</html>


方式二：

思路：子元素绝对定位，距离顶部50%，左边50%，然后使用transform:translate(-50%,-50%)
优点：高大上，可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.parent3{
				position:relative;
				height: 300px;
				width: 300px;
				background: #548CE5;
			}
			.parent3 .child3{
				<span style="color:#ff0000;">position: absolute;
				top:50%;
				left: 50%;</span>
				color: #FFF;
				<span style="color:#ff0000;">transform: translate(-50%,-50%);</span>
			}
		</style>
	</head>
	<body>
		<div class="parent3">
			<div class="child3">child3child3</div>
		</div>
	</body>
</html>




方式 三：
思路：使用css3 flex布局；采用flex布局的元素，称谓flex container。所有的子元素自动称为容器成员，父元素设置成display:flex;justify-content:center;align-items:center，
div就可以垂直水平居中了。
优点：简单快捷
缺点：兼容性不好，只支持chrome和ff，并且在移动端上用的较多

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.parent4{
				<span style="color:#ff0000;">display: flex;
				justify-content: center;
				align-items: center;</span>
				width: 300px;
				height: 300px;
				background: #E7441F;
			}
			
		</style>
	</head>
	<body>
		<div class="parent4">
			<div class="child4">child4child4</div>
			<div class="child4">child4-1 child4-1</div>
		</div>
	</body>
</html>

sly94

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
垂直水平居中

一：水平居中方式：1.margin:0 auto;水平居中，设置块元素的居中。必须要设置width，并且元素不能设置成position:absolute; .parent{ width: 300px; height: 200px; margin: 0 auto; color: #FFF; background: #5
复制链接

扫一扫