css3 transform实现水平和垂直居中

最新推荐文章于 2024-08-28 22:07:19 发布

转载最新推荐文章于 2024-08-28 22:07:19 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yeqrblog/p/8961264.html

本文介绍了一个使用HTML和CSS实现居中登录框的示例。通过设置HTML和body的高度为100%，并利用相对定位和绝对定位相结合的方式，实现了登录框在页面中的精确居中显示。此外，还展示了如何使用背景图片并调整其大小以适应不同屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {
        height: 100%;
        }
        .wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            background: url("background.jpg") center no-repeat;
            background-size: cover;
        }

        .wrapper .login {
            position: absolute;
            width: 255px;
            height: 300px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="login"></div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/yeqrblog/p/8961264.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30484739

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

一文大白话讲清楚CSS元素的水平居中和垂直居中

xiaobangkeji的博客

12-30

1136

一文大白话讲清楚CSS元素的水平居中和垂直居中

如何使用CSS实现一个水平居中和垂直居中的布局

09-07

1437

在Web开发中，实现元素在页面上的水平和垂直居中是一个常见的需求。本文将探讨几种不同的方法来实现水平和垂直居中的布局，并通过详细的代码示例来解释每种方法的工作原理。而在一些旧的浏览器支持不足的情况下，则可能需要考虑使用绝对定位或其他更为兼容的方案。虽然大多数现代浏览器都支持Flexbox和Grid布局，但是在一些老旧的浏览器中，可能需要额外的polyfill或者降级策略来保证页面的正常显示。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

参与评论您还未登录，请先登录后发表或查看评论

利用css3的transform实现垂直居中

肖肖肖丽珠的博客

07-30

6193

css里面用text-align:center加上margin:0 auto就可以实现水平居中了，但是垂直居中却没有相应的css属性来设置，而如果要设置元素能够垂直居中必须得将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。下面的代码利用css3的transform...

利用相对定位+transform实现盒子水平居中

笔记

01-03

410

上一篇我们用定位实现了盒子相对于整个页面水平居中，其实实现盒子水平居中的方式又很多种，这篇我们来利用相对定位+transform实现盒子水平居中。表示盒子在x轴中水平方向上移动，y轴水平方向上移动。话不多说，直接上代码。

使用css的position和transform实现任意元素居中

白马非马军的博客

10-07

2513

一个案例：使用css的position和transform实现任意元素居中（方块位于圆的中心）代码：效果图：

使用css3 transfrom使元素水平居中

sinat_37677339的博客

05-25

453

使用css3 transfrom使内容居中 //html结构 <html> <body> <div class="container"> </div> </body> </html> //css .container{ position:fixed; background-color:red; width:200px; height:200px; top:20%; left:

CSS篇--transform

weixin_58017233的博客

02-16

1038

transform

CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx

11-24

CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。一、...

收罗CSS布局中有关水平和垂直居中的N种方法

09-25

在CSS布局中，水平和垂直居中是网页设计中常见的需求。本文将详细介绍几种不同的方法，帮助你理解和掌握这些技巧。首先，最常见的水平居中方法是通过设置元素的`margin`属性。例如，给元素设置固定宽度，并将`...

前端CSS：CSS设置水平垂直居中的方法

08-28

1294

掌握了这些方法和技术后，你就可以在各种场景下灵活地实现元素的水平垂直居中。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，CSS Grid 是一种更为现代的布局方法，它同样可以用来实现元素的水平垂直居中。当需要居中多个元素时，可以将它们放在一个共同的容器中，并对该容器应用居中样式。Flexbox 是现代浏览器的一项强大特性，它可以轻松地实现元素的居中。

transform用法以及如何实现图片的水平垂直方向上的居中对齐

virus111222的博客

06-30

1966

通过这种组合使用，元素将相对于其父元素在水平和垂直方向上居中对齐。值，将元素在水平和垂直方向上向左和向上平移自身宽度和高度的一半。这将先将元素向右下方平移 50 像素，然后顺时针旋转 45 度，最后在水平和垂直方向上放大 1.2 倍。，这会使元素脱离正常的文档流，并相对于其最近的具有定位属性的父元素进行定位。提供了一种在不改变元素文档流的前提下，对元素进行视觉上的变换的方法。，这将使元素的顶部边缘距离其父元素顶部边缘的距离为父元素高度的一半。，这将使元素的左边缘距离其父元素左边缘的距离为父元素宽度的一半。

利用CSS实现【水平居中和垂直居中】的方法

2401_82930760的博客

04-15

2850

使用该方法实现垂直居中的原理和上面所讲的水平居中类似，简而言之就是，先让元素向下移动父元素的50%，在向上移动自身的50%，从而移动到了父元素垂直方向的中间位置。(2) flex布局中，通过设置侧轴上子元素排列方式为center，可以实现将元素水平居中，适用于所有类型的元素。（1）flex布局中，通过设置侧轴上子元素排列方式为center，可以实现将元素垂直居中，适用于所有类型的元素。对文本元素设置水平居中。/*设置侧轴上，子元素的排列方式为居中对齐*//*设置侧轴上，子元素的排列方式为居中对齐*/

css 盒子水平垂直居中 【transform最有用】

Khun_HWJ的博客

08-01

392

盒子永远在屏幕的中间，上下左右一致居中 transform是最好用的方法，适合所有【盒子没有固定的宽高】方法一 transform width:400px!important; height:300px!important; position:absolute; background:none; display:flex; top:50%!important; left:50%!impor...

div 上下左右居中

weixin_34238642的博客

01-17

194

不定宽高 position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 复制代码定宽高第一种 width:200px; height:200px; position:absolute; top:0; right:0; botto...

css垂直居中对齐transform实现

Q_zx1bydcom的专栏

11-29

711

使用transform 具体属性说明：transform :translate属性实现元素位置改变，translateX(10px) 实现x坐标轴移动10个单位，如果为负值，则沿着相反方向移动；同理translateY实现Y坐标轴位移;transform:translate(-50%,-50%)表示先沿着x坐标移动元素自身宽度50%的长度（负值相反方向），再沿着y坐标移动元素自身高度的50%长度（

transform 垂直居中

weixin_33948416的博客

06-06

933

2019独角兽企业重金招聘Python工程师标准>>> ...

CSS 利用transform达到居中效果

qq_26642611的博客

04-15

3263

让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了 <body> <div class="center"> .... </div> </body> .center{ text...

CSS 水平垂直居中:使用absolue和transform

xvzhengyang的博客

11-28

665

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平垂直居中:使用absolue和transform</title> <style type="text/css"> *{ m

CSS3实现垂直居中的八种方式

追梦i赤子心的博客

01-13

4329

CSS3的8种垂直居中方式方法/步骤1：通过verticle-align:middle实现垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display:inline-block。方法/步骤2：通过display:flex实现CSS垂直居中 随着越来越多浏览器兼容CSS中的flex...

CSS实现水平垂直居中效果的全面探索

"全面总结使用CSS实现水平垂直居中效果的方法" 在网页设计中，水平垂直居中是一项常见的需求，能够确保元素在不同屏幕尺寸和布局下保持良好的视觉效果。本文将详细探讨几种使用CSS实现这一目标的方法，从传统技术到...