html+css垂直水平居中

垂直水平居中有很多方法，以下展示一些比较好用易于理解的方法：
已知父元素宽高的情况下结合上篇margin-top高度重合问题延伸用margin，padding都很好实现；
以下方法实现未知父元素宽高子元素垂直水平居中，先设置html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html,body,div{margin:0;padding:0;}
			html{width:100%;height:100%;}
			body{ width:100%; height:100%;  background:yellow;}
			div{ width:100px;height:100px;background:red;}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

上述代码以body元素为父元素（父元素宽高未知），div为子元素，设置了一些基础样式，通过添加后续样式让div在屏幕中垂直水平居中，实现效果如图：
在这里插入图片描述
1、定位：body相对定位，给div绝对定位，然后通过定位位置和margin负值来调整位置

            body{position:relative;}
		    div{ position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;}

这里div的margin负值可以改为变形属性，减少修改div宽高时需要修改的属性值数量（margin百分比是相对父元素的宽度进行的，所以无法用margin百分比来实现位移）

            body{position:relative;}
		    div{ position: absolute;top: 50%;left: 50%;transform:translateX(-50%);transform:translateY(-50%);}

变形属性transform可以缩写为

             transform:translate(-50%,-50%);

2、弹性盒子：设置弹性盒子来实现效果

             body{display: flex;align-items: center;justify-content: center;}

3、伪元素填充

			body:before{display: inline-block;content: ""; width: 100%;height: 50%;visibility: hidden;}
                        div{margin: 0 auto;margin-top: -50px;}

以上仅为垂直居中方法中的一小部分，网上资料齐全，请自行搜集。
综上，已知父元素宽高用margin、padding，未知父元素宽高用定位，其他方法建议用以开拓思路。

html+css垂直水平居中

猜你喜欢