首页 > 其他分享> > 21 水平垂直居中

21 水平垂直居中

2022-08-05 11:35:04 作者：互联网

1 行内元素水平垂直居中

方式一：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>行内元素水平垂直居中</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			color: #fff;
			text-align: center;  /*文本居中*/
			line-height: 200px;  /*行高居中，高度等于height的高度*/
		}
	</style>
</head>
<body>
	<div class="box">
		<span>lxx</span>
	</div>

</body>
</html>

方式二（模拟td）：

display: table-cell;  /*成为单元格显示相当于td*/

vertical-align: middle;  /*垂直方向*/
vertical: 垂直方向
align：排列方式
middle: 中间显示 / top：居上显示 / bottom：居下显示

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>行内元素水平垂直居中</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			color: #fff;
			display: table-cell;  /*成为单元格显示相当于td*/
			vertical-align: middle;  /*垂直方向*/
		}
	</style>
</head>
<body>
	<div class="box">
		<span>lxx</span>
	</div>

</body>
</html>

2 块级元素水平垂直居中

方法一：

通过positon + margin属性实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>块级元素水平垂直居中</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			position: relative;
		}
		.child{
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			margin: auto;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="child"></div>
	</div>

</body>
</html>

方法二：

display: table-cell; 单元格

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>块级元素水平垂直居中</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		.child{
			width: 100px;
			height: 100px;
			background-color: green;	
			display: inline-block;
			line-height: 100px;		
		}

		td{
			width: 100px;
			height: 100px;
			background: orange;
			vertical-align: middle;
			text-align: center;
		}
		span{
			display: inline-block;
			width: 50px;
			height: 50px;
			background-color: red;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="child">我是中间</div>
	</div>
	<table>
		<th>
			<td>
				<span>LXX</span>
			</td>
		</th>
	</table>

</body>
</html>

方式三：

纯定位

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>块级元素水平垂直居中</title>
	<style type="text/css">
		.wrap{
			width: 200px;
			height: 200px;
			background-color: purple;
			position: relative;
		}
		.xiongda{
			width: 100px;
			height: 100px;
			background-color: blue;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="xiongda"></div>
	</div>

</body>
</html>

标签：居中,21,color,100px,height,垂直,width,background,200px
来源： https://www.cnblogs.com/it-lkp/p/16553743.html