元素居中方法

zeng092210

于 2018-10-23 22:33:59 发布

阅读量165

点赞数 3

分类专栏： css 文章标签：盒子居中水平垂直居中居中

本文链接：https://blog.csdn.net/zeng092210/article/details/83315697

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方法一：margin方法

利用margin-left和margin-top；公式（大 - 小） / 2 = 异动距离。

前提：父元素有边框，不然会出现将父元素也推着跑了

<!DOCTYPE html>
<html>
<head>
	<title>center is div</title>
</head>
<style type="text/css">
	.box{
		height: 200px;
		width: 200px;
		background: green;
		border: 1px solid #fff;

	}
	.son_box{
		height: 110px;
		width: 110px;
		background:skyblue;
		/*margin 方法 (200 - 110) / 2 = 45 */
		margin-left: 45px;
		margin-top: 45px;
	}
</style>
<body>
	<div class="box">
		<p class="son_box">zeng092210</p>	
	</div>
</body>
</html>

如果没有border时的效果

方法二、 position属性

利用position进行向右和向下移动父元素的50%，在用margin进行向上和向左移动子元素自身宽高的50%

<!DOCTYPE html>
<html>
<head>
	<title>center is div</title>
</head>
<style type="text/css">
	.box{
		height: 200px;
		width: 200px;
		background: green;
		border: 1px solid #fff;
		position: relative;
	}
	.son_box{
		height: 110px;
		width: 110px;
		background:skyblue;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -55px;
		margin-top: -55px;
	}
</style>
<body>
	<div class="box">
		<p class="son_box">zeng092210</p>	
	</div>
</body>
</html>

方法三、position属性都为0

利用position:absolute; left:0; top:0; right:0; bottom:0;配合margin：auto;进行元素居中

<!DOCTYPE html>
<html>
<head>
	<title>center is div</title>
</head>
<style type="text/css">
	.box{
		height: 200px;
		width: 200px;
		background: green;
		border: 1px solid #fff;
		position: relative;
	}
	.son_box{
		height: 110px;
		width: 110px;
		background:skyblue;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
</style>
<body>
	<div class="box">
		<p class="son_box">zeng092210</p>	
	</div>
</body>
</html>

方法四、css3的新增属性display: table-cell;vertical-align: middle;

利用css3的新增属性display: table-cell;vertical-align: middle;配合子元素的margin:auto

<!DOCTYPE html>
<html>
<head>
	<title>center is div</title>
</head>
<style type="text/css">
	.box{
		height: 200px;
		width: 200px;
		background: green;
		border: 1px solid #fff;
		display: table-cell; //属性指让标签元素以表格单元格的形式呈现，类似于td标签。
		vertical-align: middle; //属性设置元素的垂直对齐方式。
	}
	.son_box{
		height: 110px;
		width: 110px;
		background:skyblue;
		margin: auto;
	}
</style>
<body>
	<div class="box">
		<p class="son_box">zeng092210</p>	
	</div>
</body>
</html>

方法五、父元素上使用flexbox的布局（常用）

利用盒子弹性布局：display: flex; justify-content: center; align-items: center;

<!DOCTYPE html>
<html>
<head>
	<title>center is div</title>
</head>
<style type="text/css">
	.box{
		/* 父元素宽高知与不知都可 */
		/*height: 200px;*/
		width: 200px;
		background: green;
		border: 1px solid #fff;
		display: flex;
                 justify-content: center;
                 align-items: center;
	}
	.son_box{
		/* 子元素宽高知与不知都可  */
		/*height: 110px;*/
		/*width: 110px;*/
		background:skyblue;
	}
</style>
<body>
	<div class="box">
		<p class="son_box">zeng092210</p>	
	</div>
</body>
</html>

方法六、利用transform的属性,注意的是子绝父相定位

需要支持H5，因为用到h5的特性

需要注意的是，如果子元素用的是p标签之类的，需要先将自身的携带的padding和margin为0

<!DOCTYPE html>
<html>
<head>
	<title>center is div</title>
</head>
<style type="text/css">
	.box{
		height: 200px;
		width: 200px;
		background: green;
		border: 1px solid #fff;
		position: relative;
	}
	.son_box{
		height: 110px;
		width: 110px;
		background:skyblue;
		position: absolute;
		left: 50%;
		top: 50%;
		transform:translate(-50%,-50%);
	}
</style>
<body>
	<div class="box">
		<div class="son_box">zeng092210</div>	
	</div>
</body>
</html>

参考博文：https://blog.csdn.net/sinat_17775997/article/details/77547481

zeng092210

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
元素居中方法

方法一：margin方法利用margin-left和margin-top；公式（大 - 小） / 2 = 异动距离。前提：父元素有边框，不然会出现将父元素也推着跑了<!DOCTYPE html><html><head> <title>center is div</title></head><s...
复制链接

扫一扫

专栏目录