css 各种居中
1. 内部容器居中 flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<style>
body {
width: 100vw;
height: 100vh;
}
.parent{
width: 100%;
height: 100%;
background-color: #E2A1E266;
/* 弹性布局，使内部的容器居中 */
display: flex;
flex-direction: row;
/* 下面这俩是水平居中还是竖直居中取决于上面的 flex-direction 是row 还是column */
align-items: center;
justify-content: center;
}
.child{
background-color: #A2A1E266;
}
</style>
<body>
<div class="parent">
<div class="child">
这是一个需要居中显示的div
</div>
</div>
</body>
</html>
Result：
2. 文字居中 text-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body style="width:100vw; height: 100vh; background-color: #9999DC80">
<div style="width: 80px; text-align: center; background-color: #DC999980">
<span>这是一段测试文字居中的</span>
</div>
</body>
</html>
Result:
NOTICE
未完待续
css 各种居中的更多相关文章
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- 使用Flexbox实现CSS竖向居中
竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...
- CSS标签居中
CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...
- css常用居中
对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- CSS中居中的完全指南（中英对照翻译）
翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
- css左右居中的几种常见方法
本人是前端的新人,这是第一次写技术博客,各位大大,本文有错误请指正,手中的板砖尽量轻拍,我怕疼~~ 对于水平居中和垂直居中我也用过很多方法,但是有的时候管用有的时候又嗝屁不好使了.涉及到的情况很多,所 ...
- 用CSS实现居中的方式
直接放链接吧,最近大量时间放在看书上了,不想玩游戏,不想看电影,只想看书,早日做出自己的网站卖广告. CSS居中
- CSS布局——居中
参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...
随机推荐
- 技术漫谈｜IVR通用开发框架简说
IVR为Interactive Voice Response的缩写,意为交互式语音应答(系统).它可以应答客户的呼叫,然后为呼叫者提供语音导航或自助服务,呼叫者可通过按键输入或使用语音命令进行选择.随 ...
- django视图层与cbv源码分析
目录 一.视图层之必会三板斧 二.JsonResponse对象 两种序列化数据的方式 方式一:使用json模块 方式二:使用JsonResponse对象 使用JsonResponse对象序列化除字典外 ...
- Python中的包、模块和源码的组织关系
- C#/.NET/.NET Core技术前沿周刊 | 第 20 期（2025年1.1-1.5）
前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...
- Solution -「ZJOI 2010」「洛谷 P2570」贪吃的老鼠
\(\mathscr{Description}\) Link. 有 \(n\) 块奶酪,每块奶酪出现时段为 \([s_i,t_i]\),体积为 \(V_i\):有 \(m\) 只老鼠要吃奶酪, ...
- 1011. 在 D 天内送达包裹的能力
在 D 天内送达包裹的能力 传送带上的包裹必须在 days 天内从一个港口运送到另一个港口. 传送带上的第 i 个包裹的重量为 weights[i].每一天,我们都会按给出重量(weights)的顺序 ...
- 如何发现漏洞之我的多功能武器BurpSuite与全能插件
知识点 1.插件类-武装BurpSuite-漏洞检测&分析辅助 2.插件类-武装谷歌浏览器-信息收集&情报辅助 一.演示案例-插件类-武装BurpSuite-漏洞检测&分析辅助 ...
- .net core2.2版本下载地址
下载地址: https://download.visualstudio.microsoft.com/download/pr/279de74e-f7e3-426b-94d8-7f31d32a129c/e ...
- zabbix监控网络设备流量
项目环境 一台liunx服务器,这里使用的为ubuntu22.04(192.168.86.140) 一台华为交换机,本次监控的就是该交换机的端口流量(192.168.86.20) 一台pc主机,使用该 ...
- 你所不知道的 C/C++ 宏知识——基于《C/C++ 宏编程的艺术》
前言 刚学 C++ 的时候,就知道它糅合了四种编程模式:基于预处理器的宏.基于 C 语言的面向过程.基于类的面向对象.以及基于模板的泛型编程.其中,宏和模板元编程因为是在编译期出结果,能有效提升程序运 ...