专栏首页Super 前端元素、文字垂直居中

元素、文字垂直居中

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/57075706

让一个元素垂直居中是我们开发经常遇到的问题,下述整理各种情况:

div垂直居中

场景设定:让一个50px*50px的Div在一个200px*200px的Div中垂直居中。

<style>
  #content {
    width: 200px;
    height: 200px;
    border: 1px dashed #333;
  }
  #content div{
    width: 50px;
    height: 50px;
    border: 1px solid #f00;
  }
</style>
<div id="content">
    <div class="mid"></div>
</div>

绝对定位方式

#content {
  position: relative;
}
div.mid {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

设置外边距

div.mid {
  position: relative;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;  /*外边距为自身宽高的一半*/
}

未知容器的宽高,利用transform属性

div.mid {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*向左上角移动25px,25px*/
}

属性

说明

transform

指定应用的变换功能

transform-origin

指定变换的起点(默认元素的中心点)

transform属性值

说明

translate(<长度值,百分数值>)、translateX、translateY

在水平方向、垂直方向或者两个方向上平移元素

scale(<数值>)、scaleX、scaleY

在水平方向、垂直方向或者两个方向上缩放元素

skew(<角度>)、skewX、skewY

在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度

rotate

旋转角度

matrix(4~6个数值,逗号隔开)

指定自定义变换。

transform-origin属性的值

说明

<%>

指定元素x轴或者y轴的起点

<长度值>

指定距离

left、center、right

指定x轴上的位置

top、center、bottom

指定y轴上的位置

通过设置容器的flexbox居中方式

#content {
  display: flex;
  align-items: center;        /* 垂直居中 */
  justify-content: center;    /* 水平居中 */
}

文字垂直居中

场景设定:让一个50px*50px的Div在一个200px*200px的Div中垂直居中。

<style>
  #content {
    width: 200px;
    height: 200px;
    border: 1px dashed #333;
  }
</style>
<div id="content">
    <span>垂直居中,哒啦哒啦,就是它</span>
</div>

line-height

 #content {
   line-height: 200px; /*等于其height*/
 }
 #content span {
   display: inline-block; /*设置为行内块*/
   width: 200px;    
   overflow: hidden; /*防止内容溢出*/
   white-space: nowrap;
   text-overflow: ellipsis;
 }

dispaly:table

#content {
  display: table;
}
#content span {
  display: table-cell;
  vertical-align: middle;
}

上述两者,效果会有所差异

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript面向对象精要(二)

    构造函数就是用new创建对象时调用的函数。使用构造函数的好处在于所有用同一个构造函数创建的对象都具有同样的属性和方法。

    奋飛
  • CSS3-边框和背景

    CSS3中边框和样式得到了增强。例如:可以创建圆角边框,使用图像边框,为元素创建阴影。

    奋飛
  • CSS布局相关及Flex详解

    对于两个div元素,其是相对独立的,如果在其中一个div元素中加入内容,将会使得两个元素的底部不能对齐,导致页面多出空白区域。

    奋飛
  • 爬取百度问答目的分析网页总结

    由于最近再开发问答系统,数据获取是一个问题,所以想通过爬虫爬取百度知道里面的问题和最优答案。

    DC童生
  • 用Python爬取陈奕迅新歌《我们》10万条评论的新发现

    最近就有一部“怀旧”题材的电影,未播先火,那就是刘若英的处女作——《后来的我们》。青春,爱情,梦想,一直是“怀旧”题材的核心要素,虽然电影现在还未上映,但先行发...

    Python中文社区
  • Android开发笔记(九)特别的.9图片

    .9图片的扩展名是png,文件名后常带有“.9”字样,因为它把一个png图片划分为3*3的九宫格来分别处理,所以得名.9图片。.9.png是Android开...

    用户4464237
  • 【H5 音乐播放实例】第六节 其他

    剽悍一小兔
  • 注解处理器教程[完结]

    我在做 基于 GitHub App 业务深度讲解 Kotlin1.2高级特性与框架设计 这门课的时候,顺便做了一个注解处理器的框架,叫 Tieguanyin(铁...

    bennyhuo
  • 开始一步一步学习Message App Extension

    点击右下角打开 Size Frame Dimensions 小图 300x300 中图 408x408 大图 618x618

    君赏
  • Typecho完美实现回复可见功能

    } 就是用插件接口,在缩略内容输出之前,隐藏掉或者替换掉回复可见内容,同时使用if判断,来针对非single页面进行隐藏。

    似水的流年

扫码关注云+社区

领取腾讯云代金券