div宽高不固定,css垂直居中

作者: 古城凌三少 | 来源:发表于2019-05-06 19:18 被阅读0次

1、绝对定位：

position: absolute; top: 50%; transform: translate(0, -50%);

margin: auto;position: absolute; top: 0; bottom: 0;

2、弹性盒子：

行内元素

display: flex; align-items: center;

块级元素

display: flex; flex-direction: column; justify-content: center;

使用 line-height 和 vertical-align 对图片进行垂直居中

父级：

#box{ width: 300px; height: 300px; background: #ddd; line-height: 300px;}

子级：

#box img { vertical-align: middle;}

1-css的多种垂直居中的方法
多种css垂直居中的方法 ==css3不定宽高水平垂直居中== 1：固定高宽的垂直居中如上图，固定高宽的很简单，...
div宽高不固定,css垂直居中
1、绝对定位： position: absolute; top: 50%; transform: tr...
不定宽高的div盒子和不定宽高的盒子水平垂直居中
让一个不定宽高的div，垂直水平居中的几种实现方式不定宽高的div垂直居中的方式： 1、使用CSS方法：父盒子...
金三银四前端面试汇总
CSS div不定宽高，如何实现宽高比例1:1 div不定宽高，实现垂直居中 div不知道宽高且display:n...
css中固定宽高div与不固定宽高div垂直居中的处理办法
固定宽高div垂直居中如上图，固定高宽的很简单，写法如下： position:absolute; left:50...
css零碎知识点
<1>div垂直居中比如始终要固定显示在页面右中部的咨询客服一类的div1.当div固定宽高时 2.当div不固...
css关于居中的方式
父元素没有固定宽高水平垂直居中 html: css: 水平居中不确定子元素宽高设置水平居中，先将子元素转化为...
2018-05-23
div高度不固定，垂直居中的方法-汇总 1、高度宽度不固定，内容区域垂直居中
垂直居中：display:table的学习
实现div中的不定宽高图片垂直居中 1.这里不得不提这个布局神器 display：table-cell css代码...
2019-04-21
不固定宽高块在浏览器中垂直水平居中代码如下：预览链接