css设置水平垂直居中

前端开发中常常需要对某个元素进行设置水平垂直居中,可以通过使用css3提供的transform的translate进行元素居中效果。
可以直接看最后一步,里面包含了所有html代码,可直接使用。

操作方法

  • 01

    新建一个html文件,然后创建一个<div>标签,然后给这个标签设置一个class,案例中class为test 代码: <div class="test">div元素水平垂直居中 </div>

  • 02

    使用transform与position设置给test类设置元素垂直水平居中

  • 03

    保存html代码文件后使用浏览器打开,即可在浏览器上看到div元素水平垂直居中

  • 04

    页面所有代码。可以直接复制所有代码,粘贴到新建html文件,保存后打开即可看到效果。 所有代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .test{ width : 300px; height : 200px; background-color: #ddd; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="test">div元素水平垂直居中 </div> </body> </html>

(0)

相关推荐

  • Word2013表格如何设置水平垂直居中

    在Word 2013软件中的表格怎么设置水平垂直居中呢,请按照下面的方法来进行操作即可实现该需求. 操作方法 01 首先,打开一个Word文件,可以很清晰地看到,表格中的"搜狗指南" ...

  • css样式如何设置div元素水平垂直居中的三种方法

    CSS实现绝对定位元素的居中效果,有时候需要把一个元素进行居中,在这里讲解三种方法,各种方法有它的优缺点. 操作方法 01 1.建立txt文档,更改后缀名为html,如图: 02 2.右击html文件 ...

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

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

  • HTML网页代码中如何设置文字水平垂直居中的代码

    在代码中会遇到大量的文字位置处理,根据不同的框架将文字居中对齐 操作方法 01 如图,我们创建一个盒子,然后中间输入文字信息 02 当我们对盒子添加了边框颜色后,浏览器效果如图所示,文字在左侧第一行位 ...

  • css设置背景图片居中;css背景图片自动居中

    如何通过css设置一张背景图片自动水平垂直居中呢?可以通过css提供的background-position: center进行设置. 设置代码: .bg-img{ height: 100vh; wi ...

  • 如何让div里img图片水平垂直居中

    本篇介绍如何让div里img图片水平垂直居中. 操作方法 01 第一种css代码如图所示.display设置成table-cell,text-align为center,垂直居中设置vertical-a ...

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

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

  • 在excel表格中怎么水平垂直居中对齐?

    初学者使用excel做表格时会遇到不知道excel怎么垂直居中对其或excel怎么水平居中对齐,下面小编来教大家怎么做,希望能对大家有所帮助. 居中对齐 1.设置excel居中对齐最简单的方法就是直接 ...

  • Word 2007 中,怎么让文本框的内容水平垂直居中

    Word 2007 中,怎么让文本框的内容水平垂直居中,我演示一下. 操作方法 01 打开Word 2007 文档,如图. 02 选择[插入],在文本组里,选择[文本框],如图. 03 在下拉列表中, ...