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

CSS实现绝对定位元素的居中效果，有时候需要把一个元素进行居中，在这里讲解三种方法，各种方法有它的优缺点。

操作方法

  • 01

    1.建立txt文档，更改后缀名为html,如图：

  • 02

    2.右击html文件，选择用记事本打开，如图：

  • 03

    3.讲解第一种div绝对定位水平垂直居中【CSS3使用transform】， transform中translate偏移的百分比值是相对于自身大小的，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的，但问题是兼容性不好。IE9+以及其他现代浏览器才支持。IE9之前版本不支持,在IE8模式下，不居中，如图：

  • 04

    4.讲解第二种div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，代码两个关键点：1.上下左右均0位置定位；2.margin: auto; 其width、height如何更改都是居中显示的，兼容性可以,IE7及之前版本不支持，如图：

  • 05

    5.讲解第三种div绝对定位水平垂直居中【要提前知道div宽度与高度的值实现绝对定位元素的居中】，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。兼容性好，如图:

  • 06

    6.在这里可以看到每个方法的优缺点不同，可以根据需要自行设置。三种方法的显示图:

  • 07

    7.全部代码如下： <html>                                                                                                                                 <style >                                                                                                                              .div1{                                                                                                                                 width: 100px; height: 100px;                                                                                            border:4px solid red;                                                                                                          position: absolute; left: 50%; top: 50%;                                                                            transform: translate(-50%, -50%);  /*50%为自身尺寸的一半*/                                     } .div2{                                                                                                                                 width:200px;height:200px;                                                                                                border:5px solid black;                                                                                                      position:absolute;                                                                                                               left:0;                                                                                                                                  top:0;bottom:0;right:0;                                                                                                       margin:auto;/*50%为自身尺寸的一半*/                                                                         } .div3{                                                                                                                                 width:300px;height:300px;                                                                                               border:3px solid green;                                                                                                      position:absolute;                                                                                                               left:50%;top:50%;                                                                                                              margin-left:-150px;/*200为宽度尺寸的一半*/ margin-top:-150px;/*200为高度尺寸的一半*/ }                                                                                                                                          </style> <body>                                                                                                                                  <div class="div1">我是div1</div>                                                                                  <div class="div2">我是div2</div>                                                                                  <div class="div3">我是div3</div>                                                                                </body>                                                                                                                              </html>

赞 (0)

相关推荐

  • Word2007中设置插入和改写模式的三种方法

    我们在使用Word2007编辑文档的过程中,最常使用的是插入编辑模式.有时还需要使用改写编辑模式.本篇介绍一下Word2007文档设置插入和改写模式的方法. 方法一 01 打开Word2007文档页面 ...

  • CSS中如何设置div的边框

    您可以根据自己的需要,对div进行设置它的边框样式,或是隐藏掉div的边框.而在开发过程中,您如果使用得当div,它将给您的开发带来很大的便捷. 操作方法 01 首先,您需要创建一个div,对div进 ...

  • css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师, 学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的 ...

  • Word2010中为文字设置下划线的三种方法

    我们在使用Word2010编辑文档的时候,常常需要为文字设置下划线,以突出重点内容.本篇就来介绍一下设置下划线的三种方法. 方法一 01 打开Word2010文档页面,选中需要设置下划线的文字内容. ...

  • photoshop中为图层添加图层样式的三种方法

    photoshop中为图层添加图层样式的三种方法 操作方法 01 用photoshop打开一个图像文件 然后建立一个文字图层 其他什么图层都可以 02 点击导航栏目fx按钮 箭头所指向的 03 点击后 ...

  • win10设置Win7 Aero Glass特效的两种方法

    许多还停留的Win7和已经升级到Win10的小伙伴,没少抱怨Win10的扁平化设计,取消了广受好评的Win7 Aero Glass特效.虽然微软已经公开说明在接下来的版本会让其回归,但以他们食言的程度 ...

  • win7如何设置网页字体大小?win7系统调整网页字体大小的三种方法介绍

    如何调整电脑显示的网页的字体大小?相信大家都知道,网页字体的大小对眼睛的视觉效果很重要,字体不管太大还是太小,都会令眼睛非常不舒服.那么,w7系统怎样设置网页字体大小呢?接下来,我们小编就来教教大家w ...

  • 给Excel表格中的单元格设置边框的三种方法

    给Excel表格中的单元格设置边框的三种方法

    今天给大家介绍一下给Excel表格中的单元格设置边框的三种方法.方法一1. 打开电脑,进入桌面,找到想要编辑的Excel表格,双击打开:2. 如图,在打开的页面,将想要添加边框的单元格全部选中,然后右 ...

  • 小米手机如何找到设置进入设置界面（三种方法）

    设置功能是使用频率很高的应用,所以小米手机如何找到设置,下面介绍三种方法. 直接找设置 01 首先打开小米手机,一个个的找设置,可能在文件夹里,找到后直接打开. 小爱同学找设置 01 呼叫小爱同学,对 ...