美文网首页
上下左右居中

上下左右居中

作者: Cissy_fba3 | 来源:发表于2018-09-29 01:15 被阅读0次

1.父为block element,子随意

father{display: flex;justify-content: center;align-items: center;}

2.父为block element,子为inline element

father{text-align: center;line-height: 父高度;}

3.父为block element,子为block element

father{
  position: relative;
}
child{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -子宽;
  margin-top: -子高;
}
father{
  position: relative;
}
child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
father{
  position: relative;
}
child{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  margin:auto;
}

4.父为inline element,子为inline element
给父元素设置padding,也就是上下左右padding一致
ps:以前inline element的上下padding不起作用,现在起作用了,但是还不太好用,要缩到上面去,谨慎使用

以上block element默认有宽高


水平居中
内联元素:爸爸身上text-align:cneter
块级元素:margin-left: auto; margin-right: auto;

垂直居中
1.父元素没有定高度:自己身上定padding:10px 0;//就是上下padding一致
2.父元素确定高度。同上 上下左右居中

相关文章

  • fixed absolute 居中定位的两种方法

    一、使用transform进行居中 html部分 上下左右居中 左右居中 上下居中 二、使用margin进行居中(...

  • 上下左右居中

    一、上下左右居中:(内容高度宽度固定) 二、上下左右居中:(内容高度或者宽度不固定) 三、通过margin 在普通...

  • 文字与元素居中的方式

    我们经常会让元素进行上下左右的居中,这里提供几种方法供大家使用 我们经常会让元素进行上下左右的居中,这里提供几种方...

  • 元素div 上下左右居中方法总结

    元素div 上下左右居中方法总结 情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案: { ...

  • 如何写一个遮挡层和对话框

    遮挡层,全屏 对话框上下左右居中 html css

  • 上下左右居中

    1.父为block element,子随意 2.父为block element,子为inline element ...

  • HTML+CSS \01

    1、如何实现不确定宽高的盒子上下左右居中 2、如何实现不确定宽高的图片上下左右居中 3、纯css写倒三角的原理:

  • css

    1、如何实现不确定宽高的盒子上下左右居中 2、如何实现不确定宽高的图片上下左右居中 3、纯css写倒三角的原理: ...

  • ConstraintLayout(二)示例篇

    单一控件 居中 上下左右全部居中,通过基础篇介绍的位置属性实现

  • WEB

    html小技巧 margin:auto atuo 上下左右都居中 style="display: none;" ...

网友评论

      本文标题:上下左右居中

      本文链接:https://www.haomeiwen.com/subject/gcamoftx.html