CSS多种方式实现元素水平垂直居中
html结构:
<div class="center">确定宽高水平垂直居中</div>
<div class="center2">不确定宽高水平垂直居中</div>
<div class="center3">确定宽高水平垂直居中2</div>
<div class="center4"><span>flex水平垂直居中</span></div>
<div class="center5"><span>table-cell水平垂直居中</span></div>
css样式:
.center{
position: absolute;
background: blue;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.center2{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -150%);
background: red;
}
.center3{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
background: green;
}
.center4{
background: orange;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.center5{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 300px;
width: 400px;
background: red;
}
PS:仅作记录.
CSS多种方式实现元素水平垂直居中的更多相关文章
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- CSS中怎么设置元素水平垂直居中?
记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...
- css 文字和子元素水平垂直居中
关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...
- css 常用的绝对定位元素水平垂直居中的方法
两种方法都能够实现: 1. div { height:80%; /*一定要设置高度*/ overflow:hidden;/*建议设置*/ margin: auto; position: absolut ...
- css实现块级元素水平垂直居中的方法?
父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...
- CSS布局:元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- css进阶 04-如何让一个元素水平垂直居中?
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- css 实现元素水平垂直居中总结5中方法
个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...
随机推荐
- nignx-防盗链
环境 主机 IP 角色 centos6.5-1 192.168.3.10 源主机 centos6.5-2 19 ...
- Net 实现自定义Aop
引言 何为AOP,在软件开发中,总是听到这个AOP这个词语,但是何为AOP呢,AOP全称是Aspect Oriented Programming,中文译为面向切面编程,什么意思呢,即我们的应用程序在运 ...
- linux7,一台物理机上使用VM装多个虚拟机,始终只有一个虚拟机网络正常,其他虚拟机报错Error: Connection activation failed: No suitable device found for this connection.
今天在VM新装了一个虚拟机,结果发现原来的虚拟机连不上了,重启网络服务后报错 Error: Connection activation failed: No suitable device found ...
- Centos7 mysqldump定时任务,对mysql定时备份数据
vi mysqldump_bak.sh #!/bin/bash PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/ ...
- spring boot热部署 -- 实现 后端java热更新 -- 详细操作 【idea 的 JRebel破解】
1.前言 上一随笔写了如何使得spring boot热更新前端 ,但后端java部分无法热更新. 对于Java热更新,以前常使用 springloaded ,但是缺点 和bug很多 无法实现真正意 ...
- Kube-OVN 1.2.0发布,携手社区成员打造高性能容器网络
Kube-OVN 1.2.0 新版本如期而至,支持 Vlan 和 OVS-DPDK 两种类型的高性能网络接口.本次发布得益于社区的壮大,感谢Intel爱尔兰开发团队与锐捷网络开发团队持续积极参与Kub ...
- AI系统——机器学习和深度学习算法流程
终于考上人工智能的研究僧啦,不知道机器学习和深度学习有啥区别,感觉一切都是深度学习 挖槽,听说学长已经调了10个月的参数准备发有2000亿参数的T9开天霹雳模型,我要调参发T10准备拿个Best Pa ...
- Zabbix漏洞利用 CVE-2016-10134
最近也是遇见了Zabbix,所以这里以CVE-2016-10134为例复现一下该漏洞 什么是Zabbix? zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. ...
- springboot打包第三方jar包是失败
在项目开发时有时我们需要引入一些在maven仓库中不存在的包 一.配置maven环境变量 在path环境变量中添加 %maven_home%\bin (window10环境下) cmd界面输入 mvn ...
- 记一次异步处理导致Jetty Request对象泄漏
最近排查一个bug,发现了一系列有意思的东西,对「自定义线程池」.「Jetty线程模型」都有了一些新的认识. 本文预计阅读时间10分钟,包括: 问题表现 常见原因筛查 根因与源码分析 最佳实践 一些小 ...