css水平垂直居中
时间:2020-05-21
本文章向大家介绍css水平垂直居中,主要包括css水平垂直居中使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
块级元素居中
一、居中元素不定宽高情况(子元素有内容)
- 关键样式父元素position: relative, 子元素position: absolute, 上左为50%,transform: translate(-50%, -50%)
<style> .main { background-color: aquamarine; width: 400px; height: 400px; /* 关键代码 */ position: relative; } .content { background-color: red; /* 关键代码 */ position: absolute; /* 垂直居中 */ top: 50%; transform: translateY(-50%); /* 水平居中 */ left: 50%; transform: translateX(-50%); /*transform: translate(-50%, -50%);*/ } </style>
- flex, 父元素设置display: flex, align-items: center, justify-content: center.
<style> .main { background-color: aquamarine; width: 400px; height: 400px; /* 关键代码 */ display: flex; /* 垂直居中 */ align-items: center; /* 水平居中 */ justify-content: center; } .content { background-color: red; } </style>
二、仅居中元素定宽高情况
- 关键样式父元素position: relative, 子元素position: absolute, 上下左右0,margin: auto
<style> .main { background-color: aquamarine; width: 400px; height: 400px; /* 关键代码 */ position: relative; } .content { background-color: red; width: 200px; height: 200px; /* 关键代码 */ position: absolute; /* 垂直居中 */ top: 0; bottom: 0; /* 水平居中 */ left: 0; right: 0; margin: auto; } </style>
行内元素居中
- 水平居中text-align: center
- 垂直居中父height,子line-height同高
原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/12928683.html
- 谁适合学Python?学了Python可以做什么工作?
- webservice今日遇到的二个问题:DataTable + Namespace
- php安全配置记录和常见错误梳理
- Flex:地图缩放平移效果(简易版)
- Mongodb副本集+分片集群环境部署记录
- 线上mongodb 数据库用户到期时间修改的操作记录
- 微信小程序“授权失败”场景的处理
- 动软.net代码生成器 win2008 r2下无法连接oracle,以及vs2008模板丢失的解决
- ASP.NET Web API 支持 CORS
- oracle odp.net 32位/64位版本的问题
- Redis+TwemProxy(nutcracker)集群方案部署记录
- 金融科技新常态,未来开启拼“硬实力”阶段
- Mono 3 的默认Gc是Sgen
- Linux下Redis主从复制以及SSDB主主复制环境部署记录
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 文献笔记七十一:REDO根据vcf文件检测植物细胞器基因组RNA编辑位点
- 如如何基于Docker快速搭建Elasticsearch集群?
- 解决Centos8无法安装docker的问题
- 正则表达式
- Python函数详解一(函数参数、变量作用域)
- Java9改进try-with-resources语法
- 如何用Python实现网页转PDF
- LeetCode 242. 有效的字母异位词
- 再见Excel!最强国产开源在线表格Luckysheet走红GitHub
- 快速学习Python之迭代器和生成器
- js事件冒泡
- Deepin创建应用快捷方式
- SecureCRT下Python脚本编写
- 一篇文章上手Vue3中新增的API
- 先电OpenStack卸载脚本