最全CSS3实现水平垂直居中的10种方案

/* 第一种方案 子元素高度可以设定也可以不设定*/
.app{width: 500px;height: 500px;background: greenyellow;display: flex;align-items: center;justify-content: center;}
.app>div{width: 100px;height: 100px; font-size: 20px;background: blueviolet;
}
/* 第二种方案 子元素高度可以设定也可以不设定*/
.app{width: 500px;height: 500px;background: greenyellow;position: relative;}
.app>div{width: 100px;height: 100px;font-size: 20px;background: blueviolet;  position: absolute;top: 0;left: 0;right: 0;bottom:0;margin: auto;
}
/* 第三种方案 子元素高度可以设定也可以不设定*/
.app{width: 500px;height: 500px;background: greenyellow;position: relative;}
.app>div{width: 100px;height: 100px;font-size: 20px;background: blueviolet;  position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
/* 第四种方案 高度就是文字加line-height的高度 局限性在于必须里边的元素是inline否则不生效*/
.app{width: 500px;height: 500px;background: greenyellow;line-height: 500px;text-align: center;}
.app>div{width: 100px;font-size: 20px;background: blueviolet;    display: inline;
}
/* 第五种方案 横向利用margin auto，垂直还是利用定位和平移 也不用管里边元素的高度*/
.app{width: 500px;height: 500px;background: greenyellow;
}
.app>div{width: 100px;font-size: 20px;background: blueviolet;    position: relative;top: 50%;transform: translateY(-50%);margin-left: auto;margin-right:auto ;
}
/* 第六种方案 最不推荐的方案  通过计算padding 一旦内部元素改变了高度或者宽度，那就惨了*/
.app{width: 500px;height: 500px;background: greenyellow;box-sizing: border-box;padding-left: 200px;padding-top: 200px;
}
.app>div{width: 100px;height: 100px;font-size: 20px;background: blueviolet;  }
/* 第七中方案 本人没用过，但是确实能实现 ,原来盒子的背景颜色被子元素覆盖了，
我又试着添加了元素。有点意思。有时间可以研究下 vertical-align我一直很拒绝。这个方法也是解决多行文字垂直居中*/
.app{width: 500px;height: 500px;background: greenyellow;display: table; text-align: center;
}
.app>div{width: 100px;height: 100px;font-size: 20px;background: blueviolet;  display: table-cell;vertical-align: middle;
}
/* 第八种方案 单行文本好居中 就是让文本的父元素的line-height和高度相同*/
.app{width: 500px;height: 500px;background: greenyellow;        text-align: center;line-height: 500px;
}
.app>div{width: 100px;height: 100px;font-size: 20px;background: blueviolet;  display: inline;
}
/* 第九种方案 多行文本垂直居中 这里就不水平居中了。，。
除了歌词水平居中之外，其他这么的都不好看。
两种方法：table法和不设高度法，我自己起的名字
以下是table 法
。*/
.app{width: 500px;height: 500px;background: greenyellow;        display: table;
}
.app>div{width: 100px;height: 100px;font-size: 20px;background: blueviolet;  display: table-cell;vertical-align: middle;
}
/* 不设高度法,更简单 和其他的垂直居中一样，上代码就行
这个时候就实现多行文本居中了 然后至于换不换行加不加点就直接操作了
还能操作显示几行等等
这种方法的多行可操作强，否则小心后期难维护
*/
.app{width: 500px;height: 500px;background: greenyellow;display: flex;align-items: center;justify-content: center;
}
.app>div{width: 100px;font-size: 20px;background: blueviolet;    /* overflow: hidden;text-overflow: ellipsis;word-break: break-all;white-space: pre-line; */}

最全CSS3实现水平垂直居中的10种方案相关推荐

HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...
前端：水平垂直居中的10种方法
第一种: 通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的 ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
div盒子水平垂直居中的几种方式
1. div水平居中 div{width:100px;height:100px;margin:0 auto; } 2. div水平垂直居中这里要有两层或者给body设置高度100vh,然后给元素设置 ...

最全CSS3实现水平垂直居中的10种方案

最全CSS3实现水平垂直居中的10种方案相关推荐

最新文章

热门文章