transform 方法 上下左右元素居中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            *{
                margin: 0 ;
                padding: 0;
            }
        body{
            position: relative;
            height: 100vh;
        }

        div{
            border: 1px solid #333;
            position:absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%, -50%); /****transform  属性向元素应用2D 3D转换,该属性允许我们对元素进行旋转、缩放移动或倾斜   

                                                第一个 -50%   是x轴
                                                第二个-50%  是y轴
                                                    */

        }
    </style>
</head>
<body>
    <div>内容所在区是电风扇的发的域</div>
</body>
</html>
时间: 2024-10-07 05:07:51

transform 方法 上下左右元素居中的相关文章

元素居中的几种方法

元素居中的几种方法: ① 块级元素margin:0 auto; 针对嵌套的盒子元素,子元素在父元素中居中,只在水平方向上有效,浮动流排版中不可用 ② 内联元素text-align:center; 对块级元素设置此属性,使得盒子内的内联元素居中,一般包括文字/图片等 ③ 背景background-position:center top; 主要实现背景图片的居中 ④ 文字行内垂直居中 一行文字垂直居中:文字行高line-height的值与盒子的高度一致 多行文字垂直居中:文字内边距设置padding

使用CSS完成元素居中的七种方法

在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至少有六种实现居中的方法.我将使用下面的HTML结构从简单到复杂开始讲解: <div class="center">  <img src="jimmy-choo-shoe.jpg" alt></div> 鞋子图片会改变,但是他们都会保持

css中元素居中的几种方法

对于在网页端布局,垂直居中难于水平居中,同时实现水平和垂直居中是最难的.在移动端,因为设备的宽高是可变的,故一些方案很难实现.以下使用几种方案对下面的html去实现居中,如有不足,可以提出宝贵的意见: <div class="center"> <img src="1.jpg" alt> </div> 1. 使用text-align水平居中 这种方案只能使水平居中,要想垂直居中的话,要给div添加padding或给内容添加margi

页面元素居中的几种方法

1前言 做页面布局时,经常会需要将一些页面元素居中显示.当然,你可以设定元素的top.left来使它居中,但是,当父容器的大小发生变化,你不得不修改子元素的top.left来使它保持居中:当用户的显示器分辨率与你的测试机不同,可能会导致界面乱成一片,所以不管从代码的易维护性的角度还是从对不同分辨率显示器的适应性方面来说,这种设置固定值的方法显然是比较拙劣的.因此,做页面布局,应尽量减少使用固定值的布局方式.下面介绍几种页元素居中的方法. 1Div居中 1.1左右居中 在父窗口中设置text-al

css元素居中实现方法

关于css元素居中,查阅资料和实验有以下几种方法: 水平居中 1.最简单的在父元素中加入 text-align:center .这条语句不用关心子元素是否有固定的尺寸大小. 但只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中. 但要说明的是在IE6.7这两个奇葩的浏览器中,它是能对任何元素进行水平居中的. 2.子元素宽度确定,可以使用 margin:0 auto 或者 margin-left:auto ; margin-right:auto

不定宽块状元素居中方法

在实际的编写代码过程中,我们会遇到要为"不定宽块状元素"设置居中,比如网页上的分页导航,因为分页的数量不确定,所以我们不能通过设置宽度来限制它的弹性. 不定宽的块状元素有三种方法设置居中: 一.设置table标签: 利用table标签的自适应长度(table其长度根据其文本内容的长度决定),因此可以看做是"定宽度块元素",然后利用顶宽度块状元素居中的margin方法,使其水平居中. 例1:HTML代码 1 <!DOCTYPE html PUBLIC "

照片与同行元素居中的方法

1.照片与同行元素居中的方法:将同行元素和照片同时设置vertical-align:middle; <html><head> <title></title> <style type="text/css"> img{ vertical-align:middle; } span{ vertical-align: middle; } </style></head><body> <p>&

浮动元素居中的实现方法~~很不错

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float center</title> <style> .demo { /*最外层容器居中 非必要*/ border: 1px solid #CCC; margin: 5px auto; overflow: hidden; width: 143

清理浮动的三种常用方法以及如何居中一个浮动元素

千里之行始于足下 今天看到一个题目说如何居中一个float:left的元素的题目,我蛮以为用margin:0 auto 就可以解决了.然而,试验之后,发现事实并非如此,才发现自己对于这方面的知识竟是相当忙乱!于是撇下手头事务,翻书查资料温习了这部分‘简单’的内容.并总结如下. 一.清理浮动的三种方法. 当给元素设置了float属性之后,我们知道,元素便会脱离文档流的束缚,像一片水中浮动的树叶随波逐流.但是,在浮动的情况下,可能会导致网页内容出现一些我们并不想让其发生的干扰,例如其父元素的包裹作用