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; /* 垂直居中 */
随机推荐
- 【题解】T54037 最开始
传送门 题目大意: 对于\(a+ \frac 1{a^{}}=n\)求$a^{m}+ \frac 1{a^{m}} $,对\(10^9+7\)取模. 题目做法: 乍看此题,没有思路,但是如果用数学办法 ...
- ubuntu安装opencv(自己编译)
如果只需要python的,只需pip install opencv-python,然后apt-get一下下面第一点的东东. 1/ sudo apt-get install build-essentia ...
- CountDownLatch,CyclicBarrier,Semaphore的使用
什么时候使用CountDownLatch CountDownLatch原理和示例 Semaphore信号量的原理和示例 CyclicBarrier的用法 CyclicBarrier 和 CountDo ...
- linux日常开发使用命令整理
linux: 安装ssh-server:$ sudo apt-get install openssh-server 更新软件库:$ sudo apt-get update 启动ssh:$ sudo / ...
- css浏览器兼容问题集锦
表单按钮用input type=submit和a链接两者表现不一致的问题 表单的输入框.文本.验证码图片没有对齐 IE6/7中margin失效 IE6中margin双边距 1.问题: 表单按钮用inp ...
- CMake最好的学习资料
本文为转载,阅读不友好,请先查看原文:https://blog.gmem.cc/cmake-study-note 收下为原文内容================> 基础知识 CMake简介 CM ...
- The Contiki build system
The Contiki build system http://contiki.sourceforge.net/docs/2.6/a01796.html 先看官方文档的说明,对contiki的构建系统 ...
- zabbix 上 mysql 优化
摘自: https://segmentfault.com/a/1190000001638101
- Android窗口系统第一篇---Window的类型与Z-Order确定
Android的窗口系统是UI架构很重要的一部分,数据结构比较多,细节比较多.本篇文章主要介绍窗口相关数据结构和抽象概念理解,关于[窗口部分的博客]计划如下. 1.窗口Z-Order的管理 2.应用程 ...
- BZOJ 1634 [Usaco2007 Jan]Protecting the Flowers 护花:贪心【局部分析法】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1634 题意: 约翰留下他的N只奶牛上山采木.可是,当他回来的时候,他看到了一幕惨剧:牛们正 ...