今天有空写了一个自己主页的网站，浏览器兼容（主要ie 9以上和ch rom e），有一个以前的问题也是很常见的问题，既然遇见了，索性就记录下来。直接看问题吧
<!DOCTY PE ht ML >
<html>
<head>
< ;m eta charset="utf-8">
<t IT le>文档标题</title>
</head>
<body>
<div class="aaa">
<div>
</div>
</div>
</body>
</html>
<style>
.aaa{
width:700px;
h ei ght:500px;
position:absolute;
background-color: red ;
dis play : flex;
align -i tems: center ;
}
.aaa div{
height: 200px;
width:200px;
position: absolute;
background-color:yellow;
}
</style>
前提：适合子元素需要水平居中，但垂直 方向 需要进行 position:absolute ，如果是进行 position:relative 或者 其他 ,在 ie 或 c hr ome 都是一样的，都要以 子元素width中点 为基点。
ie下： 父容器中属性： display: flex;align-items: center; 是水平居中，但是基点是 左上角 ，如下图。如果想要水平居中，则需要加： transform:trans latex (-50%) ，这 意思 就是将作用在元素上的总体位置向 左移动自身width的50% ,好处就是不管自知不 知道 该元素的width都可以。
chrome: 父容器中属性： display: flex;align-items: center; 直接将子元素进行水平居中，基点是以 子元素width的中点 ，而不是 ie中的左上角 ;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 详解flex和position兼容采坑笔记 全部内容，希望文章能够帮你解决 详解flex和position兼容采坑笔记 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于详解flex和position兼容采坑笔记的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200886