Detailed explanation of flex and position compatibility mining notes

Today I had some free time to write a website for my own homepage, which is compatible with all browsers (mainly IE 9 and above and Chrome). There is a previous problem which is also a very common problem. Since I have encountered it, I might as well record it. Let’s look at the question directly

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document 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>

Prerequisite: The sub-element needs to be centered horizontally, but position:absolute is required in the vertical direction. If position:relative or其他is required, it is the same in ie or chrome , and子元素width中點is used as the base point.

In IE: The properties in the parent container: display: flex;align-items: center; are horizontally centered, but the base point is左上角, as shown in the figure below. If you want to center it horizontally, you need to add: transform:translateX(-50%) , which means左移動自身width的50% . The advantage is that it does not matter whether you know the width of the element or not.

Chrome: Properties in the parent container: display: flex;align-items: center; directly center the child element horizontally, with the base point being子元素width的中點, rather than ie中的左上角;

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Write your HTML like this to make your code more compatible

>>: How to modify the default storage location of Docker images (solution)