css学习之居中定位

最新推荐文章于 2024-03-09 16:12:39 发布

文鼎鼎

最新推荐文章于 2024-03-09 16:12:39 发布

阅读量151

点赞数

分类专栏： css 文章标签： css 定位

本文链接：https://blog.csdn.net/killbee365/article/details/107044973

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

定位分以下几种情况：

块级元素水平垂直居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
        .father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			position:relative;
		}
    </style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
	</div>
</body>
</html>

块级元素水平垂直居中又可以分为元素是否脱离文档流。

脱离文档流（3种）

脱离文档流，一般使用的子绝父相（需要居中定位的子元素绝对定位，父元素相对定位）。共有三种方法
1、top、left、bottom、right设为0，然后margin:auto。

		.son1{
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			left:0;
			top:0;
			right:0;
			bottom:0;
			margin:auto;
		}

2、知道自身宽高，使用top、left配合margin-top、margin-left负值。（注意：margin-left和margin-top值为元素自身宽高一半）！！！！margin使用百分比都是相对父元素的width来计算的。

		 .son1{
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			top:50%;
			left:50%;
			margin-top:-50px;
			margin-left:-50px;
 
		}

3、不知自身宽高，使用css3的新特性translate。

		.son1{
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
 
		}

不脱离文档流（2种）

不脱离文档流：需要子元素设置相对定位，水平居中一般利用的是margin:0 auto，垂直居中靠top和margin-top配合。

1、知道自身高height。

		.son1 {
			width: 100px;
			height: 100px;
			background-color: purple;
			margin:0 auto;
			top:50%;
			position:relative;
			margin-top:-50px;
		}

2、不知道自身高height，使用css3新特性translate。

		.son1{
			position: relative;
			width: 100px;
			height: 100px;
			background-color: purple;
			top:50%;
			margin:0 auto;
			transform: translate(0,-50%);
 
		}

注意点：top生效的条件是元素定位为非static

行内元素水平垂直居中

	<div class="father">
		<span class="line">这是行内元素</span>
	</div>

块级元素内的行内元素水平垂直居中对齐。
1、父元素设置line-height和height相等，保证垂直居中；父元素设置text-align:center，保证水平居中。（推荐）

		.father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			position:relative;
			line-height: 300px;
			text-align: center;
		}

2、设置为行内块元素，即display:inline-block。

		.line{
			display: inline-block;
			position:relative;
			top:50%;
			tansform:translate(0,-50%); /*知道高度也可以使用负外边距，margin-top。*/
		}
 
		.father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			text-align:center;
		}

第二种方法同样需要在父元素中设置text-align:center;

注意：margin:0 auto; 并不会使得行内块元素水平居中。

弹性盒子水平垂直居中

该方法对块级元素和行内元素都有效。
1、父元素设置display:flex定义为弹性容器。通过使用justify-content和align-items。(通用)

		.father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			display: flex;
			justify-content:center;  /*水平居中*/
			align-items: center;    /*垂直居中*/
 
		}

2、父元素设置display:flex定义为弹性容器，子元素外边距为auto。（不适用行内元素）

		.father{
			/*background-color: purple;*/
			width: 500px;
			height: 300px;
			border:1px double red;
			display: flex;
 
		}
		.son1{
 
			width: 100px;
			height: 100px;
			background-color: purple;
			margin:auto;
		}