css垂直居中七种方法

  1. Margin:0 auto; 适用于块状元素具有宽高。不是用于文本居中。
  2. text-align:center可实现文本居中,vertical-align垂直居中文本;可用于内联元素的居中
    text-align+line-height设置与height同大时,文本会水平垂直居中。
  3. text-align+display:inline-block实现元素以及文本的水平居中。若父元素与子元素div同高则视觉上会是水平垂直居中(实际上就是水平居中)
  4. relative+absolute+margin负元素边距:父元素div是relative,子元素是absolute,那么子元素需要设置top和left会根据父元素的位置进行偏移,再利用margin:负元素宽或者高进行调整。元素都已知宽高,并且可以兼容IE6-7。缺点:灵活性差,不能自适应,宽高不支持百分比和min-和max-属性。IETester工具可以用于页面调整兼容IE系列。 可以用于浮动元素居中定位。
    在这里插入图片描述
  5. absolute+margin:auto绝对居中定位。子元素设置top+left+right+bottom:0,margin:auto可以实现居中
    在这里插入图片描述
  6. absolute+transform:translate()+top:50%+left:50%实现如内联img元素未知宽高时的居中定位。子元素添加transform: translate(-50%,-50%)。
    缺点:干扰到其他transform动画效果。适用绝对定位元素的居中。

在这里插入图片描述
7. (流行用法)flex + justify-content + align-items:适用于未知宽高的情况。
在这里插入图片描述
8. Display:table+子元素table-cell

猜你喜欢

转载自blog.csdn.net/Qian_mos/article/details/84932714