当前位置:首页 > 前端技术 > CSS样式——div居中方法

CSS样式——div居中方法

2022年09月17日 09:49:53前端技术6

1、绝对居中

给div设置样式,div默认显示位置为body的左上方。

            width: 400px;
            height: 300px;
            background-color: orange;

如下图所示:
CSS样式——div居中方法 _ JavaClub全栈架构师技术笔记
首先给div添加绝对定位,并设置上下左右边距为0,然后使用margin: auto;自动居中。

            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

结果如下所示:
CSS样式——div居中方法 _ JavaClub全栈架构师技术笔记

2、水平垂直居中

给其父元素添加display: flex;弹性布局。
内容对齐(justify-content)属性:应用在弹性容器上,即父元素上。把弹性项沿着弹性容器的主轴线(main axis)对齐,如果横向有多个div,则X轴就为当前弹性容器的主轴线,Y轴为副轴线,反之亦然。

            display: flex;
            justify-content: center;
            align-items: center;

结果显示如下:
CSS样式——div居中方法 _ JavaClub全栈架构师技术笔记
如果注释掉align-items: center;属性,元素则按照当前主轴X轴居中,由于给元素开启弹性布局,故主轴应为X轴,可设置两个div验证。

            display: flex;
            justify-content: center;
            /*align-items: center;*/

显示结果如下:
CSS样式——div居中方法 _ JavaClub全栈架构师技术笔记

如果注释掉justify-content属性,使用align-items: center;属性,则居中对齐弹性盒的各项 <div> 元素,默认是沿着副轴Y轴居中,(上文提到过:由于给元素开启弹性布局,故主轴应为X轴)。

            display: flex;
            /*justify-content: center;*/
            align-items: center;

显示结果如下:
CSS样式——div居中方法 _ JavaClub全栈架构师技术笔记

3、(定位+变形)居中

给父元素添加 position: relative;相对定位。

给自身元素添加position: absolute;绝对定位。

top: 50%;使自身元素距离上方“父元素的50%高度”的高度。

left: 50%;使自身元素距离上方“父元素的50%宽度”的宽度。

transform: translate(-50%,-50%);使自身元素再往左,往上平移自身元素的50%宽度和高度。

             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);

显示结果如下:
CSS样式——div居中方法 _ JavaClub全栈架构师技术笔记

作者:体会!
来源链接:https://blog.csdn.net/weixin_43605266/article/details/109198727

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42501.html

标签: css
分享给朋友:

“CSS样式——div居中方法” 的相关文章

HTML标签属性与CSS样式

HTML标签属性与CSS样式

HTML基础 定义:超文本标记语言 Hypetext Markup Language 特点: • 不需要编译,直接由浏览器执行 • 是一个文本文件 • 必须用htm或html作文件后缀 • 对大小写不敏感,HTML或html都可以 HT...

HTML标签自带属性 和 CSS 常用属性区分

**前言:**相信很多人在开发时都遇到过这样一个问题,当我们需要用一个属性去修饰某个标签时,常常会分不清楚其到底是标签自带的属性(HTML属性)还是 CSS 里的属性,因此这篇博文记录的就是一些常用的 HTML 和 CSS 属性,方便查阅的同时,也希望和...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。