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对图片,按钮,文字等行内元素 ...
随机推荐
- github访问不了解决方法
github突然无法访问,解决办法如下-迷恋自留地 首先通过网址https://tool.chinaz.com/dns?type=a&host=github.com 修改hosts文件,win ...
- 前端每日一知之web攻击方式
脑图在线链接 本文内容依据[js每日一题]公众号精彩文章总结而来
- 基于.NET8+Vue3开发的权限管理&个人博客系统
前言 今天大姚给大家分享一个基于.NET8+Vue3开发的权限管理&个人博客系统:Easy.Admin. 项目介绍 Easy.Admin是一个基于.NET8+Vue3+TypeScript开发 ...
- 【MySQL】求和查询，目标值int，但空数据时返回null的问题（Java）
问题分析 int selectDeviceMonthRepairCount(String deviceType, String month); <select id="selectDe ...
- Python爬虫requests判断请求超时并重新post/get发送请求
Python爬虫requests判断请求超时并重新post/get发送请求在使用Python爬虫中,你可以使用requests库来发送网络请求.为了判断请求超时并重新发送请求,你可以设置一个超时时间, ...
- 基于Vue的前后段分离开发项目中<img :src />标签中引用vue的data属性中定义的图像地址失败的解决办法
问题描述: 基于Vue的前后段分离开发项目中<img :src />标签中引用vue的data属性中定义的图像地址失败,如下图所示: 解决办法: 修改后写法,加上require即可.如下 ...
- 阿里IM技术分享(四)：闲鱼亿级IM消息系统的可靠投递优化实践
本文由阿里闲鱼技术团队景松分享,原题"到达率99.9%:闲鱼消息在高速上换引擎(集大成)",有修订和改动,感谢作者的分享. 1.引言 在2020年年初的时候接手了闲鱼的IM即时消息 ...
- IM通讯协议专题学习(七)：手把手教你如何在NodeJS中从零使用Protobuf
1.前言 Protobuf是Google开源的一种混合语言数据标准,已被各种互联网项目大量使用. Protobuf最大的特点是数据格式拥有极高的压缩比,这在移动互联时代是极具价值的(因为移动网络流量到 ...
- Redis 学习笔记之基础
一.Redis 是什么 Redis 是一个使用 C 语言写成的,开源的.key-value 结构的.非关系型数据库.它支持存储的 value 类型相对更多,包括 String(字符串).List(列表 ...
- 微服务实战系列（十一）-微服务之自定义脚手架-copy
微服务实战系列(十一)-微服务之自定义脚手架 1. 场景描述 (1)随着微服务越来越常见,一个大的项目会被拆分成多个小的微服务,jar包以及jar之间的版本冲突问题,变得越来越常见,如何保持整体微 ...