前端-html元素居中

最新推荐文章于 2022-09-30 13:49:50 发布

蛙夏~

最新推荐文章于 2022-09-30 13:49:50 发布

阅读量212

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/y1238r/article/details/110187166

版权

方法一：针对普通文档流

div{
    width: 200px;
    height: 200px;
    background: lightslategray;
    margin: 0 auto;   
}

<body>
    <div></div>
</body>

方法二：针对绝对定位

.content{
    position: absolute;
    width: 100px;
    height: 100px;
    background: khaki;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

<body>
    <div class="content"></div>
</body>

方法三：父中子中

.father{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: lightgray;
}
.son{
    /* float: left; */
    position: absolute;
    width: 100%;
    height: 100%;
    background: lightsalmon;
}

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蛙夏~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

关于前端元素居中的方法集合

码小目的进化路程

03-27

2351

主要讲述了如何进行元素居中,首先判断元素类型,综合考虑后期的维护运营问题决定选择何种方式居中.

前端练习01-前端-HTML（表格）

03-25

在前端开发中，HTML（HyperText Markup Language）是构建网页的基础语言，用于描述网页内容和结构。本练习主要关注HTML中的表格元素，这是在网页中展示数据的重要方式。"前端练习01-前端-HTML（表格）"的目标是让你...

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

python编程关于面向对象说法正确的是_Python面向对象编程

weixin_39641697的博客

12-04

668

一、面向对象编程程序等于指令加数据组成(算法加数据结构)，Python 支持面向过程式编程也支持面向对象式编程。面向对象编程——Object Oriented Programming，简称 OOP，是一种程序设计思想。OOP 把对象作为程序的基本单元，一个对象包含了数据和操作数据的函数。面向过程的程序设计把计算机程序视为一系列的命令集合，即一组函数的顺序执行。为了简化程序设计，面向过程把函数继续切...

Python3 面向对象(22)

weixin_42180610的博客

02-07

239

Python3 面向对象 Python从设计之初就已经是一门面向对象的语言，正因为如此，在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。如果你以前没有接触过面向对象的编程语言，那你可能需要先了解一些面向对象语言的一些基本特征，在头脑里头形成一个基本的面向对象的概念，这样有助于你更容易的学习Python的面向对象编程。接下来我们先来简单的了解下面...

前端元素居中总结

傲雪当歌的博客

08-04

204

div内有多个div <style> .flex-center { padding: 8px; display: flex; justify-content: center; border: 2px dashed #f69c55; } .flex-center >div { padding: 8px; .

前端练习01-前端-HTML（hr练习）

03-24

- 可以尝试将`<hr>`与其他HTML元素结合使用，如标题、段落、列表等，进一步理解它们之间的关系和作用。通过这个练习，你可以深化对HTML基本结构和`<hr>`标签的理解，提升你的前端开发技能。继续探索和实践，你会...

WEB前端技术-表格元素练习

热门推荐

qq_55818379的博客

04-14

1万+

一、text-align：center;）这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。二、使用margin:0 auto;水平居中前提：给元素设定了宽度和具有display：block；的块级元素。让一个DIV水平居中，只要设置了DIV的宽度，然后使用margin：0 au

python支持面向对象_python中什么是面向对象

weixin_39775577的博客

12-01

用面向对象的思维解决问题的重点当遇到一个需求的时候不用自己去实现，如果自己一步步实现那就是面向过程；应该找一个专门做这个事的人来做。面向对象(object-oriented ;简称: OO) 至今还没有统一的概念我们可以把它定义为: 按人们认识客观世界的系统思维方式,采用基于对象(实体) 的概念建立模型,模拟客观世界分析、设计、实现软件的办法。面向对象编程(Object Oriented P...

Python编程：python面向对象

彭世瑜的博客

05-27

1556

类似的文章： Python编程：class类面向对象 Python编程：面向对象深入文章内容面向对象类，对象属性和方法封装数据隐藏继承(object) 代码复用多态接口重用 magic method魔术方法构造对象运算符类的展现类的属性访问面向对象类，对象构造函数 def __init__ 析构函数 def __d...

前段元素居中的N种方法

山山而川~

02-02

397

行内元素居中文本垂直居中单行文本垂直居中单行文本的垂直居中是最简单的，设置line-height与盒子高度一样就可以。这里有一个误区，很多人设置单行文本居中的时候会同时设置height与line-height相同，其实大可不必设置height,只设置line-height就可以，这时候盒子的高度由line-height撑起来，与line-height完全相同。 .center { // 完全可以不设置高度 // height: 20px; line-height: 20px; } 多行

python面向对象编程基本规则

weixin_30747253的博客

02-21

121

Agenda 面向对象思想类的定义属性　　属性修饰器方法　　操作符重载继承和多态　　封装、继承、多态面向过程、面向对象、面向函数面向对象的思想，用类和对象对现实世界进行抽象类：对事物的抽象对象：是类的一个实例类的组成：有变量和函数组成（属性、方法）变量：属性、成员属性、是对数据的封装函数：方法、成员方法、是对行为的封装 ...

Python 对于面向对象编程的初步总结（一）

天天的博客

07-21

357

python 中的面向对象编程

杨海吉

09-30

251

..在实践中，类定义内的语句通常都是函数定义，但也允许有其他语句，有时还很有用 — 我们会稍后再回来说明这个问题。在类内部的函数定义通常具有一种特别形式的参数列表，这是方法调用的约定规范所指明的 — 这个问题也将在稍后再说明。当进入类定义时，将创建一个新的命名空间，并将其用作局部作用域 — 因此，所有对局部变量的赋值都是在这个新命名空间之内。特别的，函数定义会绑定到这里的新函数名称。当（从结尾处）正常离开类定义时，将创建一个类对象。这基本上是一个包围在类定义所创建命名空间内容周围的包装器；

面向对象编程的基本规则 python例子

巴山夜雨

02-11

508

一、两个标准：低耦合和高内聚就是指模块之间低耦合、模块内部高内聚，以追求软件系统的可重用和易维护。一个完整的系统，模块与模块之间，尽可能的使其独立存在。也就是说，让每个模块，尽可能的独立完成某个特定的子功能。模块与模块之间的接口，尽量的少而简单。如果某两个模块间的关系比较复杂的话，最好首先考虑进一步的模块划分。实际上这两个规则可能会处于冲突情况，这就要结合实际情况去考虑了。低耦合：模块之间...

python代码规范---面向对象和边界问题

一夜奈何梁山

08-18

414

目录一：SOLID设计原则S：单一职责原则：O：开放-关闭原则：L：里氏替换原则：I：接口隔离原则：D: 依赖倒置原则：二：边界问题1：吃感冒药胜过看天气预报：2：容器内容不存在2.1： defaultdict的使用：2.2：字典的setdefault方法和pop方法：2.3：善于运用切片3：危险的OR4：避免手动数据校验：参考地址：https://github.com/piglei/one-python-craftsman/blob/master/zh_CN/12-write-sol

前端html使div上下居中

07-27

要使div在前端html中上下居中，有多种方法可以实现。其中一种方法是使用CSS3的弹性布局(flex)。可以通过设置父元素的display属性为flex，然后使用align-items属性将子元素垂直居中。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ height: 100%; width: 100%; display: flex;/*设置为弹性容器*/ align-items: center; /*定义div1的元素垂直居中*/ justify-content: center; /*定义div1的里的元素水平居中*/ background: green; } .div2{ width: 50%; height: 50%; background: red; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </body> </html> ``` 另一种方法是使用line-height属性和height属性相同的值，来实现文字在div中的垂直居中。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字垂直居中</title> <style> html,body{ margin: 0px; padding: 0px; height: 100%; width: 100%; } .div1{ height: 100px; line-height: 100px; width: 100px; background: red; } </style> </head> <body> <div class="div1">我的文字1</div> </body> </html> ``` 希望以上方法能够帮助到您实现div的上下居中。 #### 引用[.reference_title] - *1* *2* *3* [CSS——div垂直居中及div内文字垂直居中](https://blog.csdn.net/FHHHC/article/details/127964371)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]