inline 或者 inline-* 的元素竖直居中
可以借助 padding, line-height, vertical-align 等属性. 有如下两种具体情景:
单行竖直居中, 如单行文本或者链接
这种情况, 通过给元素上下添加相同大小的 padding 值即可实现竖直居中.
- <div class="container">
- <p > 单行文本竖直居中, 添加相同的 padding-top & padding-bottom 值 </p>
- </div>
- body {
- margin: 0;
- }
- .container {
- background-color: #fe435e;
- padding: 10px;
- }
- p {
- margin: 0;
- color: #fff;
- /* 相同的上下 padding 值使单行文字居中 */
- padding-top: 100px;
- padding-bottom: 100px;
- }
专门建立的学习 Q-q-u-n:784-783- 零12 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
如果不想使用 padding 不方便使用 padding 时, 可以通过给元素设置 line-height, 使其等于父容器的高度, 从而实现竖直居中. 注意, 此时记得要考虑父容器的 padding 和 border 带来的高度变化.
多行竖直居中, 如多行文本
和单行文本一样, 给元素上下添加相同大小的 padding 值, 还是好用滴~
- <div class="container">
- <p>
多行文本竖直居中, 给元素上下添加相同的 padding 值.<br />
这只是另外一段无关紧要的, 用来测试的废话.
- </p>
- </div>
- body {
- margin: 0;
- }
- .container {
- background-color: #fe435e;
- padding-left: 10px;
- padding-right: 10px;
- }
- p {
- width: 160px;
- margin: 0 auto;
- color: #fff;
- line-height: 1.5;
- /* 给元素上下添加相同大小的 padding 值 */
- padding-top: 40px;
- padding-bottom: 40px;
- }
另外一种方法, 是借助 table 的属性: 将父容器设置成 table, 需要竖直居中的元素设置为 table-cell, 然后就可以使用 vertical-align 属性来居中了.
- <div class="container">
- <p>
多行文本竖直居中, 将父容器设置为 table, 需要竖直居中的元素设置为 table-cell, 然后使用 vertical-align 属性.
- </p>
- </div>
- body {
- margin: 0;
- }
- .container {
- background-color: #fe435e;
- padding-left: 20px;
- padding-right: 20px;
- height: 400px;
- /* 父容器设置成 table*/
- display: table;
- }
- p {
- width: 160px;
- margin: 0 auto;
- color: #fff;
- line-height: 1.5;
- /* 需要竖直居中的元素设置为 table-cell*/
- display: table-cell;
- vertical-align: middle;
- }
块级元素竖直居中
通常借助 绝对定位 和 translate 等手段, 在已知或者未知块级元素高度时, 分别使用不同的方法.
1. 块级元素高度已知
此时可以使用绝对定位的方法, 并借助 margin 可以为负值的特性, 实现绝对定位居中:
- /* 已知元素高度为 100px (也可以是百分比, 如 80%)*/
- height: 100px;
- /* 先使用绝对定位, 将元素的上边界置于竖直的中间 */
- position: absolute;
- top: 50%;
- /* 再使用 margin-top, 将元素向上移动自身高度的一半 */
- margin-top: -50px;
- <div class="container">
- <div class="v-c">
- <p > 使用绝对定位使元素竖直居中.</p>
- </div>
- </p>
- </div>
- body {
- margin: 0;
- }
- .container {
- background-color: #fe435e;
- padding: 0px 20px;;
- height: 400px;
- /* 父容器需要设置 position, 使需要竖直居中的元素相对父容器进行绝对定位 */
- position: relative;
- }
- .v-c {
- width: 400px;
- padding: 0 20px;
- padding-right: 20px;
- background-color: #ade4eb;
- height: 200px;
- /* 使用绝对定位使元素竖直居中 */
- position: absolute;
- top: 50%;
- margin-top: -100px;
- /* 需要考虑 padding 和 border, 如果没有设置 box-sizing: border-box; 的话 */
- }
- p {
- margin: 0 auto;
- color: #fff;
- line-height: 200px;
- }
专门建立的学习 Q-q-u-n:784-783- 零12 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
表示类似这段代码的使用频率简直不要太高~ 于是在使用 SCSS 的前提下, 自己封装了一个 mixin, 专门用来实现这种定位方式.
- // 定义绝对定位实现水平, 垂直居中
- @mixin abs_h_center($width) {
- position: absolute;
- width: $width;
- left: 50%;
- margin-left: -($width/2);
- }
- @mixin abs_v_center($height) {
- position: absolute;
- height: $height;
- top: 50%;
- margin-top: -($height/2);
- }
- // 然后使用的时候直接引用就可以了, 这样可以避免在改动元素宽或高时, 还需要同时去改 margin-left 或者 margin-top 的值
- .content {
- @include abs_v_center(200px);
- }
块级元素高度不固定
与上面提到的使用绝对定位居中的方法原理类似, 只不过在元素高度不确定的情况下, 借助 translateY 使元素向上移动自身高度的一半, 进而实现竖直居中.
- /* 先将元素的上边界置于竖直的中间 */
- position: relative;
- top: 50%;
- /* 再使用 translateY, 将元素向上移动自身高度的一半 */
- transform: translateY(-50%);
- <div class="container">
- <div class="v-c">
- <p > 使用 translateY 使元素竖直居中.</p>
- </div>
- </p>
- </div>
- body {
- margin: 0;
- }
- .container {
- background-color: #fe435e;
- padding: 0px 20px;;
- height: 400px;
- }
- .v-c {
- width: 400px;
- padding: 0 20px;
- padding-right: 20px;
- background-color: #ade4eb;
- /* 使用 translateY, 使元素竖直居中 */
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- }
- p {
- margin: 0 auto;
- color: #fff;
- line-height: 200px;
- }
目前想到的就这些, 应该足够覆盖大部分的使用情况了~ 以上这些实现方法, 当然也可以是混合使用的, 具体如何, 就看应用场景啦.
来源: http://www.bubuko.com/infodetail-3360743.html