CSS——水平垂直居中

最新推荐文章于 2024-11-02 23:02:00 发布
最新推荐文章于 2024-11-02 23:02:00 发布
阅读量75 收藏
点赞数
分类专栏： css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq812457115/article/details/117278984
版权
本文介绍了使用Flexbox、Position以及Line-height和Text-align三种方式在CSS中实现元素的居中布局。通过实例代码详细展示了每种方法的实现步骤和效果，帮助开发者更好地理解和应用这些布局技巧。
摘要由CSDN通过智能技术生成

1. 使用flex

/*父级元素*/
.parent-div{
        width: 100%;
        height: 500px;
        background: greenyellow;
        display: flex;
        align-items: center;
        justify-content: center;
    }

2. 1使用position

/*父级元素*/
.parent-div{
        width: 500px;
        height: 500px;
        background: greenyellow;
        position: relative;
    }
/*子级级元素*/
.children-div{
        width: 100px;
        height: 100px;
        font-size: 20px;
        background: blueviolet;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom:0;
        margin: auto;
    }

2.2 使用position

/*父级元素*/
.parent-div{
        width: 500px;
        height: 500px;
        background: greenyellow;
        position: relative;
    }
/*子级级元素*/
.children-div{
       width: 100px;
        height: 100px;
        font-size: 20px;
        background: blueviolet;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

3 使用line-height与text-align

/*父级元素*/
.parent-div{
        width: 500px;
        background: greenyellow;
        line-height:500px;
        text-align:center;
    }
/*子级级元素*/
.children-div{
       width: 100px;
        font-size: 20px;
        display:inline;
    }
一只漫步前行的羊
关注
专栏目录
bootstrap 页面垂直居中_前端布局之——水平垂直居中
weixin_39558804的博客
12-27 1406
其他平台文章地址github：前端布局之——水平垂直居中 · Issue #3 · yaodebian/blog​github.comcsdn：https://blog.csdn.net/YaoDeBiAn/article/details/100907015​blog.csdn.net前端页面的居中是平常开发中比较常见的布局，以下将从水平居中、垂直居中、水平垂直居中三个角度分析不同的布局方法。水平...
CSS——垂直水平居中
LHJ0521的博客
09-06 355
垂直水平居中方法
CSS布局——水平垂直居中
u014013957的博客
03-25 315
水平垂直居中 不定宽高 Flex 容器设置display: flex; align-items: center; justify-content: center; <style type="text/css"> #box{ /* 关键属性：display、align-items、justify-content --START */ display: flex; align-items: center; justify-content: center;
CSS——div垂直居中及div内文字垂直居中
FHHHC的博客
03-19 5205
　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。 一、div垂直居中的一些方法： 1.当height、width固定大小时， <!DOCTYPE html> <html> <head> <meta charset="utf-8"&...
CSS居中——水平居中、垂直居中方法
zg0601的博客
10-26 5529
CSS居中——水平居中（子元素有无宽度）、垂直居中（子元素有无高度）
CSS布局——水平垂直居中、等分布局、圣杯布局
2401_86402077的博客
09-04 584
信息时代，互联网是一个重要的信息传播载体。网页成为人们查找资源，获取信息，发布信息，学习交流的重要平台。现今世界，也是一个各项技术都飞速发展的时代。网页的设计制作依傍于互联网而生，并且风格设计在不断更新。因此，对网页的设计要求也不断提高，尤其是在创新的社会背景下网页设计的新理念和新方法，不断推陈出新。CSS对网页的布局是网页体系中的重中之重，本文基于此背景，阐述CSS+DIV技术在网页布局方面的应用。1 CSS盒子模型。
CSS 水平,垂直,水平垂直居中方案——持续更新
2401_85122963的博客
06-10 737
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。top: 0;bottom: 0;
CSS——如何垂直居中一个浮动元素 or img图片
Bonsoir777的博客
07-07 1043
本文主要介绍如何利用css垂直居中一个浮动元素 or img图片
css实现元素水平垂直居中——6种方式
weixin_58691935的博客
07-02 3239
实现元素水平垂直居中的方式： 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局
CSS样式之——水平垂直居中、div盒子在页面水平垂直居中
再加班就成仙的博客
09-04 311
CSS样式之——水平垂直居中 0、 两个盒子，子盒子在父盒子中垂直居中 基本盒子布局 <div class="parent">父盒子 <div class="child">子盒子</div> </div> 00、利用子绝父相 (1)利用margin:auto; .parent{ position: absolute; width: 500px; height: 500px; bac
css 水平居中，垂直居中，自适应宽度的代码
09-25
### CSS水平居中与垂直居中及自适应宽度详解 #### 一、宽度自适应的元素水平居中 在Web开发中，使元素能够根据内容的多少自动调整宽度，并将其水平居中的需求非常常见。本篇文章将详细介绍如何通过CSS实现这一效果...
CSS——水平布局和垂直布局
surymy
11-17 3930
水平布局 子元素在其父元素中水平方向的位置由以下几个属性共同决定： 为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width <head> <meta charset="UTF-8"> <title>Surymy</title> <style> .box1{ width:280px; height:200px;
CSS——图片和span水平垂直居中问题
GoodLuck_wu5的博客
07-27 457
主要解决小图标+文字水平垂直居中的问题
HTML5/CSS3基础——div盒子水平垂直居中的三种方案
weixin_43633329的博客
03-04 4419
如何使盒子水平垂直居中，是我们在写页面布局经常能遇到的问题之一。以前我的我每次需要用到水平垂直居中的时候都会百度，每次百度总是又能找到不同的方式 而且还记不住:( 但今天就写系统的总结和整理了一下 我们使div盒子水平垂直居中的方式到底有哪些 跟我之前有着一样困惑的小伙伴一起来看吧～～
前端学习Day10 CSS盒子属性（附练习版）
As977_的博客
11-02 478
medium 为默认宽度，thin 为小于默认宽度，thick 为大于默认宽度。⚠️：要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为absolute。在web页面中，“盒子”的结构包括厚度、边距、填充等元素，引申到CSS中，就是border、margin和padding。对于任何盒子，都可以分别设定4条边的padding、border和maegin，实现各种各样的排版效果。length 由浮点数字和单位标识符组成的长度值，不允许负值。
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 765
【代码】第八章 利用CSS制作导航菜单课后习题。
第八章 利用CSS制作导航菜单习题
最新发布
2402_87184304的博客
11-02 286
【代码】第八章 利用CSS制作导航菜单习题。
flex布局的练习题 ---都抖音解决方案(web)
m0_75035023的博客
10-31 455
flex布局的练习题 ---都抖音解决方案(web),html,
第8章利用CSS制作导航菜单(第八次作业)
H2629896520的博客
11-01 653
【代码】第8章利用CSS制作导航菜单(第八次作业)
css绝对定位垂直居中
07-28
- *1* *2* [CSS 垂直居中的七种方法——史上最详细总结](https://blog.csdn.net/qq_37384271/article/details/108993564)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值