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对图片,按钮,文字等行内元素 ...
随机推荐
- #oscp#渗透测试 kioptix level 3靶机getshell及提权教程
声明! 文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关,切勿触碰法律底线,否则后果自负!!!! 一.靶机搭建 点击扫描虚拟机 选择靶机使在文件夹即可 二.信息收集 前言 信 ...
- CI/CD集成规范
集成方式说明 a.用户向Gitlab提交代码,代码中包含 Dockerfile, JenkinsFile文件. b.Jenkins监听Gitlab代码库的推送和变更事件 c.Jenkins调用mave ...
- docker-compose开机自启动设置
vi /etc/rc.d/rc.local /usr/local/bin/docker-compose -f /home/seafile/docker-compose.yml up -d 给rc.lo ...
- 禅道bug增加自定义字段
禅道版本 18.9 需求 给禅道的bug模块,增加自定义字段. 目前主要增加"发现阶段"."所属环境"."出现频率" 增加bug的类型 在b ...
- UML之集合类型
无论何时当我们要使用一个多值对象时,我们必须要清楚两个问题,一是这些值的顺序重要吗?二是允许重复值的存在吗?在编程语言中还会有其他的明确的信息,在UML中,只需明确这两个问题的答案即可确定对应的集合类 ...
- 开源即时通讯IM框架MobileIMSDK的Uniapp端开发快速入门
► 相关链接: ①MobileIMSDK-Uniapp端的详细介绍 ② MobileIMSDK-Uniapp端的开发手册new(* 精编PDF版) 一.理论知识准备 您需要对Uniapp和Vue开发有 ...
- Python 并发编程实战：优雅地使用 concurrent.futures
在 Python 多线程编程中,concurrent.futures 模块提供了一个高层的接口来异步执行可调用对象.今天,我们将通过一个循序渐进的案例,深入了解如何使用这个强大的工具. 从一个模拟场景 ...
- AI应用平台搭建之旅(上) - 框架篇（附：AICon大会阿里国际Agent应用平台分享）
前言 LangEngine内源项目发起于阿里巴巴集团内部组织,LangEngine是类似LLM应用开发框架LangChain的纯Java版本.该框架现已正式对外开源:https://github.co ...
- 使用iText对PDF文件签章和验章
PDF是国际板式文件标准,使用的范围很广.OFD为国产板式文件标准,设计起点很高,天然支持国产签名算法(SM2.SM3):具有后发优势,目前市场占有率仍然很低,前途光明而又漫长.PDF标准并不支持国产 ...
- 第五章 dubbo源码解析目录
第十章 dubbo线程模型 一 netty的线程模型 在netty中存在两种线程:boss线程和worker线程. 1 boss线程 作用: accept客户端的连接: 将接收到的连接注册到一个wor ...