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对图片,按钮,文字等行内元素 ...
随机推荐
- electron项目build报资源包下载出错
前情 公司有个桌面端项目是基于Electron开发的. 坑 上一次遇到npm install时安装electron无法安装,通过配置.npmrc文件解决了,今天在在执行npm run build的时候 ...
- Redis应用—1.在用户数据里的应用
大纲 1.社区电商的业务闭环 2.Redis缓存架构的典型生产问题 3.用户数据在读多写少场景下的缓存设计 4.热门用户数据的缓存自动延期机制 5.缓存惊群与穿透问题的解决方案 6.缓存和数据库双写不 ...
- 使用 Autofac, MediatR 和 FluentValidator 构建松耦合 ASP.NET Core API 应用
使用 MediatR 和 FluentValidator 1. 创建示例文件夹 Sample 首先,创建示例文件夹 Sample. 2. 创建表示层项目 Web 在示例文件夹 Sample 中,使用标 ...
- GraphQL Part IV: 浏览器内的 IDE
只是一个使用,这里不做介绍了.
- GraphQL Part VI: 使用 Postgres 和 EF Core 持久化数据
这次我们关注持久化数据而不是 GraphQL 方面.我们将使用 Postgres 数据库作为后端存储,您可能问:为什么要使用 Postgres?因为大家都熟悉 SQL Server,我们尝试一下新东西 ...
- 【NAS】Docker Gitea+SakuraFrp+绿联DPX4800标 搭建私有代码托管平台
本文主要分享 Gitea的一些设置,和Https的实现. Gitea的一些设置 映射 网络 HTTPS的实现 先准备好一个域名,建议准备一个1Panel 创建一个AC账户然后点击申请证书,手动解析. ...
- Spring Security OAuth2 - 自定义 OAuth2.0 令牌发放接口地址
登录实现拿浏览器网页登录举例: 基于 OAuth2.0-密码模式 实现网页登录的本质就是浏览器通过 /oauth/token 接口将 用户名 和 密码 等信息传给后台, 然后后台验证通过后返回一个有效 ...
- .NET周刊【12月第3期 2024-12-15】
国内文章 重磅推出 Sdcb Chats:一个全新的开源大语言模型前端 https://www.cnblogs.com/sdcb/p/18597030/sdcb-chats-intro Sdcb Ch ...
- Unity 3D简单使用C#脚本，脚本的执行顺序
Unity3D脚本间执行顺序 Unity3D中一个场景有时候需要多个脚本,可以挂在同一物体上执行,也可以挂在不同物体上执行 那么执行顺序是怎样的?我们来测试下 在上个项目基础上,再建一个Test2脚本 ...
- Qt开发经验小技巧166-170
有时候需要暂时停止某个控件发射信号(比如下拉框combobox添加数据的时候会触发当前元素改变信号),有多种处理,推荐用 blockSignals 方法. //方法1:先 disconnect 掉信号 ...