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对图片,按钮,文字等行内元素 ...
随机推荐
- 通用的定时任务工具 schedule-server
背景: 我曾经在一个自动化测试平台中集成定时任务,基于 APScheduler 库花了好长时间解决重复执行的问题.定时任务集成在服务中也让服务变得复杂.最后,我们选择了公司其他团队go语言开发的一个定 ...
- uni-app小程序(快手、抖音)getCurrentPages使用坑位记录
前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,公司项目就是主推uni-app. 坑位 最近在做一个 ...
- jmeter使用jdbc连接SQL server，执行SQL报错处理
前置环境参数:jdk-8u391-windows-x64,驱动:sqljdbc4.jar 备注:这是解决后的截图,将就用 问题一:使用jmeter5.5,使用jdbc连接SQL server,执行SQ ...
- Navicat连接Oracle数据库报错：oracle library is not loaded解决方法
连接Oracle时提示"oracle library is not loaded". 去Oracle官网下载Oracle Instant Client Downloads. htt ...
- Gitlab:Restoring PostgreSQL database gitlabhq_production ... ERROR: must be owner of extension pg_trgm
Restoring PostgreSQL database gitlabhq_production ... ERROR: must be owner of extension pg_trgm ERRO ...
- shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行.如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set +e 命令来取消该设置. 例如,下面是一个忽略错误并继 ...
- Docker封装Java环境镜像（Alpine+OpenJDK）
在给Java程序封装镜像时,使用的基础镜像动辄上百M,还需要每次部署的时候挂载时区等问题,不如自己封装一个镜像,供之后使用. 这里使用Alpine Linux(3.9) 安装OpenJDK 1.8及部 ...
- TB交易开拓者_趋势跟踪策略_多品种对冲_递进优化回测_A0001188020期货量化策略
如果您需要代写技术指标公式, 请联系我. 龙哥QQ:591438821 龙哥微信:Long622889 也可以把您的通达信,文华技术指标改成TB交易开拓者的自动交易量化策略. 众所周知,投资界有基本面 ...
- k8s集群部署项目完整过程记录
将k8s-web项目制作成镜像 构建 study/k8s-web:1.0 镜像 构建java环境并上传jar包 docker pull java:8u111 mkdir /usr/dockerfile ...
- 记录vue和element-ui导出表格到excell
1.安装插件 npm install 'file-saver' npm install 'xlsx' 2.引入插件 import FileSaver from 'file-saver' import ...