css实现水平垂直的几种方法

最新推荐文章于 2024-06-03 18:53:48 发布
最新推荐文章于 2024-06-03 18:53:48 发布
阅读量674 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limingxiaojie/article/details/96976423
版权

方法一、CSS3的flex布局：justify-content: center;实现水平居中；

                                 align-items: center;实现垂直居中；

<style>
        .baba {
            width: 300px;
            height: 300px;
            background: green;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .son {
            width: 100px;
            height: 100px;
            background: #dcdcdc;
            
        }
</style>
<body>
    
    <div class="baba">
        <div class="son"></div>
    </div>
</body>

 

方法二、flex+margin：auto

<style>
        .baba {
            width: 300px;
            height: 300px;
            background: green;
            display: flex;
        }
        .son {
            width: 100px;
            height: 100px;
            background: #dcdcdc;
            margin: auto;
        }
</style>
<body>
    
    <div class="baba">
        <div class="son"></div>
    </div>
</body>

方法三、position+tansform

<style>
        .baba {
            width: 300px;
            height: 300px;
            background: green;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background: #dcdcdc;
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    
    <div class="baba">
        <div class="son"></div>
    </div>
</body>

 方法四、position+margin：auto

<style>
        .baba {
            width: 300px;
            height: 300px;
            background: green;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background: #dcdcdc;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    
    <div class="baba">
        <div class="son"></div>
    </div>
</body>

方法四、父元素diaplay:table-cell vertical-align: middle;text-align: center;

               子元素：display：inline-block 

<style>
        .baba {
            width: 300px;
            height: 300px;
            background: green;
            display: table-cell;
            vertical-align: middle; 
            text-align: center;
        }
        .son {
            width: 100px;
            height: 100px;
            background: #dcdcdc;
            display: inline-block; 
        }
    </style>
</head>
<body>
    
    <div class="baba">
        <div class="son"></div>
    </div>
</body>

 

 

 

limingxiaojie
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现水平垂直居中的几种方式
milk_tiger的博客
10-13 3739
1.最简单 margin: 0 auto line-height等于height .outer { width: 200px; padding: 200px; background-color: pink; } .inner { width: 100px; height: 100px; background-color: skyblu
css实现水平垂直居中的方法
weixin_48931100的博客
08-18 223
css实现水平垂直居中的方法
CSS实现水平垂直居中的6种方式
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
实现水平垂直布局的 7 种方式
一碗周
12-27 1113
写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) 实现水平垂直布局的 7 种方式 在开始今天的文章之前，我们先把今天的主要代码放到下面： 公共的 CSS 样式如下： body
css元素水平垂直居中
最新发布
博哥的二进制世界
06-03 1167
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;
5种CSS实现垂直对齐的方法
web前端开发
02-27 9493
英文 |https://betterprogramming.pub/5-different-ways-to-vertically-align-your-css-content-6ac86...
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
Qlz的博客
12-22 4579
3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transform-style 7 3D案例 3D转换 我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。 3D特点： 近大远小。 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 1 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意
CSS实现水平垂直的几种方法
qq_43987917的博客
09-21 1019
title: CSS实现水平垂直的几种方法 categories: CSS tags: - CSS - HTML - 面试题 date: 2021-09-11   在HTMl中分为块级元素和内联元素，两者实现居中的方法都 一样，并且块级元素中还要区分定宽高和不定宽高的情况 水平居中 行内元素水平居中 父元素设置 text-align: center <div class="container"> <p>我是内联元素</p> </div> <s.
CSS水平垂直居中的几种方法总结
09-24
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
CSS 实现垂直居中的几种方法(必看)
12-13
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式...
全面总结使用CSS实现水平垂直居中效果的方法
09-27
要实现水平垂直居中，我们可以利用CSS的多种属性和方法。以下详细介绍了几种不同的实现方案： 第一种方法是最原始的方法，它适用于单行文本的居中。这种方案的核心在于，将元素的高度和行高设置为相同的数值。如果...
元素水平垂直居中的几种方法
01-20
第四种方法利用`flexbox`布局实现居中，这是现代CSS布局的标准方式。代码如下： ```css #box1 { width: 300px; height: 300px; border: 1px black solid; display: flex; justify-content: center; align-...
css3 flex实现div内容水平垂直居中的几种方法
11-21
总的来说，CSS3的Flexbox布局提供了一种强大的方法来处理元素的布局和对齐，使得水平垂直居中变得简单而直观。通过熟练掌握这些基本属性，开发者可以构建出更复杂、更适应不同屏幕尺寸的网页布局。
css垂直水平居中的详细实现方式（6种）
weixin_46591819的博客
02-22 8709
css垂直水平居中方式
translateZ/perspective/transform-style的使用讲解
shkstart的博客
07-31 2749
概述 自从2001年W3C指定完了CSS3的草案规范之后,CSS3就成了我们前端不可分割的一部分,它不仅美化了我们的页面,也方便了我们的对样式的书写,而说到CSS3,就不能不提及CSS3中十分重要的2D/3D变换 而在3D变换中,有这么几个属性使得非常多的同道中人为之困惑,那就是transform:translateZ/perspective/transform-style,我们今天就来说说这几个属性的作用 一. transform-style 1.该属性有两个属性值,一是flat,二是preserve-3
关于transform-style:preserve-3d的一些理解
liangtaox8的博客
11-16 1万+
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。 transform-style属性的使用语法非常简单： CSS Code复制内容到剪贴板 transform-style: flat | preserve-3d   其中flat值为...
CSS水平垂直居中常见方法总结
热门推荐
小牛肉_
12-02 11万+
css元素水平垂直居中
CSS实现水平垂直居中的五种方法
Ned的CSDN博客
12-22 6074
前言 今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto 子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。 CSS代码： div{ width: 600px; height: 600px; position: relative; border: 1px solid #000000; } img{ position: absolute; margin: auto
css 居中问题的总结
qq_43889848的博客
05-15 2245
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
css水平垂直居中的几种方法
04-28
以下是几种实现水平垂直居中的方法： 1. flexbox布局：将容器设置为display: flex，再加上align-items: center和justify-content: center，即可实现水平垂直居中。 2. absolute + transform：对于已知宽高的元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值