css 垂直+水平居中
垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论
1.父盒子固定高度[定位]
实现1:
father-box: position:relative
child-box:position:absolute+left:50%+top:50%+translate(-50%,-50%)
实现2:
father-box:position:relative
child-box: position:absolute+top:0+right:0+bottom:0+left:0+margin:auto
2.父盒子不固定高度[弹性盒子]
实现1:
father-box:display:table
child-box:display:table-cell+vertical-align:middle+text-align:center
实现2:
father-box:display:flex+align-items:center+justify-content:center
child-box:flex:1
css 垂直+水平居中的更多相关文章
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- css 垂直水平居中总结
一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...
- CSS垂直水平居中方法整理
CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...
- css垂直水平居中方案
1. 水平居中 如果是inline元素:在父元素上面设置text-align:center; 如果是block元素:设置宽度和margin:0 auto; 如果是多块级元素:在父元素上面设置text- ...
- (转载)css垂直水平居中的整理
方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...
- CSS垂直水平居中
小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
随机推荐
- C#绘制渐变背景
//绘制渐变色背景 Graphics g = e.Graphics; LinearGradientBrush linearGradientBrush = new LinearGradientBrush ...
- springboot-actuator监控的401无权限访问
在pom.xml里边添加 <dependency> <groupId>org.springframework.boot</groupId> <artifact ...
- 2019-5-21-C#-命令行如何静默调用-del-删除文件
title author date CreateTime categories C# 命令行如何静默调用 del 删除文件 lindexi 2019-05-21 11:32:28 +0800 2019 ...
- 对CNN感受野一些理解
对CNN感受野一些理解 感受野(receptive field)被称作是CNN中最重要的概念之一.为什么要研究感受野呐?主要是因为在学习SSD,Faster RCNN框架时,其中prior box和A ...
- leetcode 238 & leetcode 152 & leetcode 228
lc238 Product of Array Except Self 遍历两次数组 用一个res[] 记录答案 1) 第一次,从左往右遍历 res[i] 记录0~i-1的乘积 2) 第二次,从右往左遍 ...
- HZOI20190722 B visit 组合数+CRT合并
题目:https://www.cnblogs.com/Juve/articles/11226266.html solution: 30%:dp 设dp[k][i][j]表示经过k时间,在(i,j)的方 ...
- LUOGU P2675 《瞿葩的数字游戏》T3-三角圣地
题面 解题思路 手推可以得出,最后每个数字的贡献其实就是第n行杨辉三角数,然后直接卢卡斯直接算(今天才找到lucas定理时间复杂度是log n,log以模数为底).代码略麻烦,不想改了. 代码 #in ...
- pycharm每次新建项目都要重新安装一些第三方库的解决办法(转载防删)
目前有三个解决办法,也是亲测有用的: 第一个方法:因为之前有通过pycharm的project interpreter里的+号添加过一些库,但添加的库只是指定的项目用的,如果想要用,就必须用之前的项目 ...
- Activiti实战03_Hello World
Hello World如此经典,以至于几乎学习没一门新的技术都是从Hello World开始,可能意味着开启了新世界的大门吧,接下来就让我们一起步入到Activiti的世界中吧! 本文所使用开发环境 ...
- oracle数据库忘记sys密码如何改密码
ORACLE服务器操作: 1.win+R打开dos窗口cmd 2.输入 sqlplus/nolog出现 3.输入 conn / as sysdba 出现 4. alter user sys ident ...