css 实现垂直水平居中常用方法
html
<div class="outer">
<div class="inner"></div>
</div>
基本样式
.outer {
background: #ddd;
width: 500px;
height: 500px;
}
.inner {
width: 100px;
height: 100px;
background: red;
}
一、宽高不固定
1.display: flex
.outer {
display: flex;
align-items: center;
justify-content: center;
}
2.absolute + transform
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.absolute + margin: auto
.outer {
position: relative
}
.inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
4.display: table-cell
.outer {
display: table-cell;
vertical-align: middle;
}
.inner {
margin: auto;
}
二、宽高固定
1.text-align + display: inline-block + vertical-align: middle
.outer {
text-align: center;
}
.outer::after {
content: '';
display: inline-block;
vertical-align: middle;
height: 500px;
}
.inner {
vertical-align: middle;
display: inline-block;
}
2.absolute + top + left + margin-top + margin-left
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
参考:https://github.com/louzhedong/blog/issues/2
css 实现垂直水平居中常用方法的更多相关文章
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- css实现垂直水平居中的方法(个数不限)?
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- CSS之垂直水平居中的背后
最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...
- css文本垂直水平居中
一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...
- CSS实现垂直水平居中
HTML结构: <div class="wrapper"> <div class="content"></div> < ...
- Css实现垂直水平居中的六种方法
经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...
- CSS布局--垂直水平居中
···设置两个盒子 <div class="parent"> <div class="child"> </div></ ...
- CSS - flex 垂直水平居中
display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */
随机推荐
- 深刻理解render 和 redirect_to
深刻理解render 和 redirect_to http://www.blogjava.net/fl1429/archive/2009/03/12/259403.html 由于最近老是在表单提交后出 ...
- 实例化Flask的参数和对app的配置
Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? 它能给我们带来怎么样的方便呢? 首先展示一下: from ...
- Android Weekly Notes Issue #257
Android Weekly Issue #257 May 14th, 2017 Android Weekly Issue #257 本期内容包括: Gradle中关于项目的一些设置; Android ...
- Python环境问题
http://installion.co.uk/ubuntu/precise/main/p/python3.2/uninstall/index.html
- TensorFlow框架(6)之RNN循环神经网络详解
1. RNN循环神经网络 1.1 结构 循环神经网络(recurrent neural network,RNN)源自于1982年由Saratha Sathasivam 提出的霍普菲尔德网络.RNN的主 ...
- java调用shell命令及脚本
shell脚本在处理文本及管理操作系统时强大且简单,将shell脚本结合到应用程序中则是一种快速实现的不错途径本文介绍使用java代码调用并执行shell 我在 -/bin/ 目录下写了jbossLo ...
- packettotal.com - PacketTotal - A Free Online PCAP Analysis Engine
找相似的pcap文件:https://packettotal.com/app/analysis?id=aff96903aae4b73364e027c8a3e85060&name=similar ...
- Linux_学习_02_ 重启tomcat与查看tomcat日志
一.重启tomcat服务器 cd /home/ehlhec/tomcat_dingtalk/bin ./shutdown.sh ps -ef|grep java ./startup.sh (1) 进入 ...
- 「LuoguP4180」 【模板】严格次小生成树[BJWC2010](倍增 LCA Kruscal
题目描述 小C最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当小C洋洋得意之时,小P又来泼小C冷水了.小P说,让小C求出一个无向图的次小生成树,而且这个次小生成树还得 ...
- Codeforces 762B USB vs. PS/2 贪心
Codeforces 762B 题目大意: 有a台只有USB接口的电脑,b台PS/2接口的电脑,c台两种接口都有的电脑.每台电脑只用装一个鼠标.给出n个鼠标及其费用,每个鼠标只能使用一遍.在最大化有鼠 ...