css父元素和子元素 css中的块级元素了解 _知识分享

ainer\”>简单的场景：是知道父元素和子元素大?。?直接margin:xx auto;text-align:center;
面试场景：父元素大小未知，子元素大小已知
来源地址：
方法一：table-cell文本/图片水平垂直居中
主要实现代码：
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;

文章插图
谷歌：

文章插图
IE8:

文章插图
缺点：1）只能是IE8及以上版本支持此方法
2)margin会失效，举例如下图

文章插图
方法二：display:flex 弹性布局实现水平垂直居中
将父元素设置为 display:flex；
justify-content: center；//水平方向
align-items: center;//垂直方向

文章插图
谷歌

文章插图
IE10(flex布局只支持IE10及以上)

文章插图
缺点：flex布局只支持IE10及以上
方法三：使用 position 定位实现水平垂直居中
· 将父元素设置为 positon: relative；
· 子元素也设置为 positon: absolute，然后top:50%;left:50%;margin-left:-子元素高度/2，margin-top: -子元素高度/2实现水平垂直居中。

文章插图
· 谷歌：

文章插图
IE:IE5以上都可以

文章插图
缺点：absolute的元素已经完全脱离文档流
方法四：使用 position 定位实现水平垂直居中
· 将父元素设置为 positon: relative；
· 子元素也设置为 positon: absolute ，然后top:50%;left:50%;margin-left:-子元素高度/2 ， margin-top: -子元素高度/2实现水平垂直居中。
旋转rotate
变形：transform 扭曲skew
缩放scale
移动translate：参考自己的位置来平移

文章插图
· 谷歌：

文章插图
IE:IE8不兼容

文章插图
特点：IE9及以上可以兼容，完全脱离文档流

文章插图
【css父元素和子元素 css中的块级元素了解】