水平居中和垂直居中常用方法总结
水平居中
行级元素:为该行级元素的父元素设置text-align:center样式
<div style="width: 500px;height: 100px;border: 1px solid green;text-align:center;"><span>行级元素</span>
</div>
块级元素:为其自身设置margin:auto样式
<div style="width: 500px;height: 100px;border: 1px solid red;"><div style="margin:auto;width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>
垂直居中
1.display:table;此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符.
display:table-cell;此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
<div style="display: table;width: 500px;height: 200px;border: 1px solid red;"><div style="display: table-cell;vertical-align: middle;text-align:center;">块级元素</div>
</div>
2. 利用flex布局使内部块级元素水平,垂直居中
display:flex;justify-content: center; align-items:center;
<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px "><div style="width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>
3.利用定位实现
父元素:position:relative;
子元素:position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;"><div style="position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div>
</div>
水平居中和垂直居中常用方法总结相关推荐
- POI单元格合并(合并后边框空白修复)、自动列宽、水平居中、垂直居中、设置背景颜色、设置字体等常见问题
POI单元格合并.自动列宽.水平居中.垂直居中.设置背景颜色.设置字体等常用方法 POI设置单元格样式 POI设置文字 POI设置边框样式 POI设置文字水平居中.垂直居中 POI设置背景颜色 POI ...
- 水平居中和垂直居中css_如何使用CSS将图像垂直和水平居中
水平居中和垂直居中css There are many ways to align HTML elements with CSS. One of the most common things deve ...
- css水平垂直居中_css 如何实现水平居中、垂直居中(超全面)
前言:元素一般分为 块级元素 和 行内元素 块级元素可以设置高度,宽度,行内元素则不能,如果非要给行内元素设置宽高,只需要将 display 属性设置为 inline-block 即可 一.水平对齐 ...
- HTML元素水平居中和垂直居中
目标:设置html元素水平居中和垂直居中,介绍三种方法. 方法一:推荐,兼容性好,没有冲突 <!DOCTYPE html> <html lang="en"> ...
- php垂直居中代码_div标签:水平居中和垂直居中的实现(附代码)
本篇文章给大家带来的内容是关于div标签:水平居中和垂直居中的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在前端开发时,经常会遇到需要居中的情形,居中分2种情况,一个是水平居 ...
- CSS3 Flexbox轻松实现元素的水平居中和垂直居中
网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技 ...
- CSS设置元素水平居中、垂直居中方式汇总
按照水平居中.垂直居中.行内元素.块级元素等条件进行组合获取效果 水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: . ...
- bootstrap 页面垂直居中_bootstrap4如何实现div的水平居中以及垂直居中
bootstrap是一款十分流行的前端组件库,我们在制作模板的时候,使用bootstrap会提高工作效率,减少自己写css样式的麻烦.鲶鱼CMS系统的官方主题大部分是使用bootstrap来制作的,当 ...
- 移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性 在移动端时可以放心的使用h5相关的标签 但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
最新文章
- .NET中小数,浮点数和双精度之间的区别?
- AAAI 2018 论文 | 蚂蚁金服公开最新基于笔画的中文词向量算法
- iis7 您无权使用所提供的凭据查看此目录或页面。_使用 Spring Cloud 和 Docker 轻松构建微服务架构!...
- PyTorch 1.8 发布,支持 AMD,优化大规模训练
- python编程示例_Python套接字编程–服务器,客户端示例
- 用vb6.0编写简易计算机,vb小程序(用vb编写简单小程序实例)
- d3开发Svg编辑器
- 微信小程序 列表item点击事件
- 基于STM32F405平台的多摩川协议编码器通讯过程(2)
- Emulex/QLogic万兆争夺继续 存储还是板载优先?
- 教育培训机构管理系统软件如何查看优惠券记录?
- DeFi守护神是谁?
- 刘彬20000词汇06
- 解读百度权重是怎么计算的
- 苹果5概念机_iPhone x Fold概念机曝光,搭配A13处理器,还支持5G,价格多少合适?...
- CentOS命令汇总
- 大数据-------元数据管理
- 阿里正式开源通用算法平台Alink,“双11”将天猫推荐点击率提升4%
- 某高速小程序获取sign
- 【Phase One SDK】飞思相机SDK的环境配置及调用