CSS

vertical-align ： 垂直居中

用于设置图片或表单（行内块元素）和文字垂直对齐。（行内或行内块元素有效）

属性

baseline 默认 元素放置在父元素基线上

top 把元素的顶端与行中最高元素顶端对齐

middle 把此元素放置在父元素的中部

bottom 把元素的顶端与行中最低的元素的顶端对齐

定位(垂直水平居中)

注 top:clac(50% - 150px);

四则运算 支持加减乘除 加或减前后加空格

垂直水平居中(盒子300px 300px):

1.position:absolute/fix;top:calc(50% - 150px);left:calc(50% - 150px);

2.position:absolute/fix;top:50%;left:50%;(然后margin.)

3.position:absolute/fix;top:0; left:0;right:0;bottom:0;margin:auto;

4.position:absolute/fix;top:50%;left:50%;transform:translate(-50%,-50%);

行内块垂直水平居中

添加辅助线

div::after{content:"";display:inline-block;height:100%;width:0;visibility:hidden;}img,div::after{vertical-align:middle;}

弹性盒居中

在弹性盒中图片或盒子居中

  margin:auto;

基线对齐居中

.big{text-align:center;line-height:100%;
}
.small{display:inline-block;vertical-align:middle;
}
/*在需要居中的子盒子small 后面添加一个span空标签*/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！