未知高度的div在父元素中水平垂直居中的方法

来源:互联网 发布:兰索拉唑 副作用 知乎 编辑:程序博客网 时间:2024/04/28 12:53

居中方法暂时找到两种:

1、父元素:


在父元素中使用:

display: flex;justify-content: center;align-items: center;
这些属性,即可以让子元素垂直居中:

其中:

justify-content:是在主轴上的对齐方式,即X轴

align-items:是在Y轴上的对齐方式,针对于在只有一条轴的情况


2、在子元素上加上:


子元素用绝对定位后:加上:

top:50%;

left:50:

transform:translate(50%,50%);

就可以实现追至水平居中,但这样的话,在子元素中使用css3,的animation属性会造成显示异常(朦胧感)


1 0
原创粉丝点击