详解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别的,在iechrome全是1样的,都要以子元素width中点为基点。

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

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

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