div中的div居中

<div class="map-dialog">
		<h2>123123111111111111111</h2>
		<div class="map-dialog-close" @click="mapDialogCloseClick">
			<div class="map-dialog-close-btn"></div>
		</div>
		<div class="map-dialog-content">
			<div class="content">
				<div class="index">1</div>
				<div class="text">
					在外、东、西三条航路之间规划A、B、C、D 四个商船碍渔监测区域。
				</div>
			</div>
			<div class="content">
				<div class="index">2</div>
				<div class="text">
					商船进入A、B、C、D四个监测区域内，滞留时间超过60分钟，即判断为碍渔商船，将商船碍渔信息同步给海事部门，实现跨部门协 同管控。
				</div>
			</div>
		</div>
	</div>

.map-dialog { 
   
		position: absolute;
		display: flex;
		flex-direction: column;
		height: 400px;
		width: 50%;
		bottom: 25px;
		z-index: 1;
		background-size: 100% 100%;
		background-position: center center;
		left: 25%;
		background-image: url(https://cdn-upload.datav.aliyun.com/upload/download/1639723937833-wuDwGs6h.png);
		color: #fff;
		h2 { 
   
			height: 60px;
			line-height: 35px;
			font-size: 26px;
			font-family: "Microsoft YaHei";
			font-weight: 500;
			text-align: center;
			line-height: 60px;
		}
		.map-dialog-close { 
   
			width: 30px;
			height: 30px;
			pointer-events: auto;
			image-rendering: -webkit-optimize-contrast;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://cdn-upload.datav.aliyun.com/upload/download/1635417637913-PnkMhG4V.png);
			-webkit-mask-image: none;
			-webkit-mask-repeat: initial;
			-webkit-mask-size: initial;
			background-color: initial;
			border-radius: 0px;
			cursor: pointer;
			margin-left: calc(100% - .55rem);
			position: absolute;
			top: 15px;
		}
		.map-dialog-close-btn { 
   
			width: 19px;
			height: 20px;
			pointer-events: auto;
			image-rendering: -webkit-optimize-contrast;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(//cdn-upload.datav.aliyun.com/upload/download/1627009529912-2C4sN3pF.png);
			-webkit-mask-image: none;
			-webkit-mask-repeat: initial;
			-webkit-mask-size: initial;
			background-color: initial;
			border-radius: 0px;
			cursor: pointer;
			margin: 5px 0px 5px 5px;
		}
	}
	
	.map-dialog-content { 
   
		width: 100%;
		height: 100%;
		/*line-height: 340px;*/
		font-size: 26px;
		display: grid;
		.content { 
   
			display: -webkit-box;
			/*水平居中*/
			justify-content: center;
			/*垂直居中*/
			align-items: center;
			padding: 0px 100px 0 100px;
			.index { 
   
				float: left;
				font-family: "Microsoft YaHei";
				color: rgb(25, 177, 251);
				width: 30px;
			}
			.text { 
   
				width: 100%;
				border-radius: 15px;
				background: rgb(58 191 255 / 30%);
				padding: 10px;
			}
		}
	}

今天的文章div中的div居中分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。