元素在盒子里垂直水平居中?

元素在盒子里垂直水平居中?

方案一:定位

这里则就需要父容器设置为position:relative;子容器设置为positive:absolute;

设置了定位的元素就支持了上下左右(top、bottom、left、right)四个坐标。关于定位下的三种方法设置子元素居中:(假如父盒子400*400,子盒子200*200)

  1. 在清除子盒子高度下设置居中: top:50%; left:50%; margin-top:-100px; margin-left: -100px;
  2. 不清楚子盒子高度下设置居中:top:50%; left:50%; transform: translate( -50%, -50%);  (设置translate位移是因为仅设置top、left都为50%只是子盒子的原点即左上角在居中位置,并不是我们想要的子盒子中心的在居中位置,所以要通过设置位移的偏移来达到我们真正想要的居中)
  3. 不清楚子盒子高度下设置居中:top:0; left:0; right:0; bottom:0; margin: auto;

 

方案二:弹性盒flex布局

1.方法一:父容器设置display:flex;  子容器设置margin:auto;

2.方法二:父容器设置display:flex; justify-content:center;(子元素主轴居中对齐),align-items:center;(子元素侧轴(也叫交叉轴即交叉点)居中对齐)

 

方案三:vertical-align

1.方法一:父容器设置vertical-align: middle;(垂直对齐方式),display:table-cell;(这里只能垂直居中,要水平居中还有设置text-align),text-align:center;

同时子盒子还要设置display:inline-block;(但是存在的问题是父元素转换为table-cell后,该父元素的margin-bottom就不生效了,自身的特性也会发生改变如margin:auto;也不生效了)

2.方法二:父容器设置text-align:center;line-height:400px;   

子盒子设置display:inline-block;(只有转换为内联块,text-align、line-height才生效),vertical-align:middle;(行内块独有的特性)。小解释:text-align、line-height是针对文字居中的设置,这时的子盒子或图片转化为inline-block后,是和文字的基线对齐的,所以这时还要设置行内块独有的特性vertical-align:middle;来使div或图片垂直居中对齐。

 

居中无非就是:行内、行内块元素的水平居中text-align:center。块级元素的水平居中margin:auto。单行文本垂直居中line-height:父元素的高度。背景图的居中。定位实现元素的居中。table-cell方法实现元素的居中。弹性实现元素的居中。

发布了111 篇原创文章 · 获赞 0 · 访问量 1134

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览