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)

Several methods to clear floating (recommended)

Detailed explanation of flex and position compatibility mining notes

Several methods to clear floating (recommended)

Some experience in building the React Native project framework

Linux type version memory disk query command introduction

ElementUI implements cascading selector

MySQL 5.7.10 winx64 installation and configuration method graphic tutorial (win10)

Detailed explanation of Vite's new experience

CSS Summary Notes: Examples of Transformations, Transitions, and Animations

MySQL max_allowed_packet setting

How to build ssh service based on golang image in docker

Tutorial on installing php5, uninstalling php, and installing php7 on centos

Recommend

Nginx configuration SSL and WSS steps introduction

Overview and differences between html inline elements and html block-level elements

HTML form_PowerNode Java Academy

Introducing multiple custom fonts in CSS3

Implementation of building custom images with Dockerfile

MySQL inspection script (must read)

How to implement vue page jump

Implementation of webpack-dev-server to build a local server

CSS3 transition to achieve underline example code

How to install tomcat8 in docker

About the problem of writing plugins for mounting DOM in vue3

The combination and difference between ENTRYPOINT and CMD in dockerfile

How to use fdisk to partition disk in Linux

Tutorial on installing mysql under centos7

Detailed explanation of MySQL subqueries (nested queries), join tables, and combined queries