css设置垂直居中多种方法

在前端开发中内容居中是必不可少的,让我们一起来看一些垂直居中的方案有那么些吧。

操作方法

  • 01

    文本内容设置垂直居中。 单行文本, 则可设置 line-height 等于父元素高度。 居中代码: .text{ line-height: 50px; }

  • 02

    行内块级元素设置垂直居中。 居中需要试用到 display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ height: 300px; width: 500px; border:1px solid; text-align: center; } .parent::after,.son{ display:inline-block; vertical-align: middle; } .parent::after{ content:''; height:100%; } </style> </head> <body> <div class="parent"> <div class="son">大家好</div> </div> </body> </html>

  • 03

    试用 transform 设置元素垂直水平居中。 设置父元素相对定位(position:relative), 子元素如下css样式: .son{ position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

(0)

相关推荐

  • css样式的多种方法设置

    操作方法 01 在html页面找到body标签,在body标签里新建一个div标签,然后在div标签中新建a标签,并在a标签中输入页数. 新建style标签 回到html代码页面,找到title标签, ...

  • CSS水平居中和垂直居中实现方法

    一.CSS 居中 - 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题.可是这个方法有时候完全不起作用 ...

  • css设置div在网页中垂直居中

    css设置div在网页中垂直居中方法很多,这是本人常用的方法 我们要做一个在网页中垂直水平方向都居中的一个div来作一个如下效果的框 操作方法 01 本实例以新文档开始 02 先放置一个div,并且设 ...

  • css设置背景颜色的方法和设置背景颜色的透明度

    css设置背景颜色的方法和设置背景颜色的透明度 操作方法 01 新建html文件 02 创建p标签和背景颜色用#色值表示 03 预览效果如图 04 创建p标签和背景颜色用英文设置背景颜色 05 预览效 ...

  • windows8系统关闭的多种方法整理

    大家有自己一贯的关机方式,比如都是从开始按钮下进行关机的,可是大家知道吗,其实关闭win 8有很多种方法的,小编现在就介绍下关闭Windows 8系统多方法教程。 使用windows 8系统总结出了不 ...

  • 多种方法玩好Windows系统字体

    多种方法玩好Windows系统字体 Windows系统中的字体,平时往往很难引起人们的注意;可是对于那些追求时尚、注重个性的朋友来说,系统字体就成了他们美化系统的一种表达 方式。为了帮助那些追求个性化 ...

  • 会声会影给视频添加边框的多种方法

    图1:会声会影为视频添加素材方法汇总 会声会影w给视频添加边框的多种方法 1.使用画中画滤镜制作 图2:使用画中画滤镜为素材添加边框 画中画是一种可以制作很多效果的滤镜,而且还有很多边框样式可以选择, ...

  • win10新建文件夹假死怎么办?解决Windows10新建文件夹假死的多种方法

    有时候我们打开Windows10的文件夹,可能会出现假死的情况,打开的非常缓慢,几乎半天打不开该文件夹,出现这种情况怎么办呢?在Windows 10 文件资源管理器中的「新建文件夹」按钮假死.文件资源 ...

  • 如何将长数字串复制到Excel中?excel中批量粘贴超长数字串的多种方法介绍

    excel中如何批量粘贴超长数字串?在常规格式下,EXCEL会默认把输入超过11位的数字以科学记数法的表达方式来显示,但是这样的显示结果让我们不能直观的看数字,也不能直接区分大小,特别是多个超长数字差 ...