详解flex和position适配采坑笔记

日期：2021-01-20 类型：科技新闻我要分享

关键词：小程序活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

今日有时间写了1个自身首页的网站，访问器适配（关键ie 9以上和chrome），有1个之前的难题也是很普遍的难题，既然遇见了，索性就纪录下来。立即看难题吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<title>文本文档题目</title>
</head>
<body>
	<div class="aaa">
      <div>
        
      </div>
  </div>
</body>
</html>
<style>
.aaa{
 	 width:700px;
 	 height:500px;
 	 position:absolute;
	 background-color:red;
  	 display: flex;
  	 align-items: center;
}
.aaa div{
  	height: 200px;
  	width:200px;
  	position: absolute;
 	background-color:yellow;		
}
</style>

前提条件：合适子元素必须水平垂直居中，但竖直方位必须开展position:absolute，假如是开展position:relative或别的,在ie或chrome全是1样的，都要以子元素width中点为基点。

ie下：父器皿中特性：display: flex;align-items: center;是水平垂直居中，可是基点是左上角，以下图。假如要想水平垂直居中，则必须加：transform:translateX(⑸0%)，这意思便是将功效在元素上的整体部位向左挪动本身width的50%,益处便是无论自知不知道道该元素的width都可以以。

chrome: 父器皿中特性：display: flex;align-items: center;立即将子元素开展水平垂直居中，基点是以子元素width的中点，而并不是ie中的左上角;

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：手机微信抽奖在手机微信经营中有甚么功效返回下一篇：没有了