css实现垂直居中的几种方法
方法1、这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align 属性。
#wrapper { //代表父元素
display: table;
}
#cell { //代表子元素,里面可放内容
display: table-cell;
vertical-align: middle;
}
方法2、使用绝对定位的 div,transform: translate(-50%, -50%)
.wrapper1{ //父元素 相对定位
position: relative;
height: 240px;
width:100px;
}
.content { //子元素 绝对定位
position: absolute;
top:50%;
left:50%;
margin: auto;
-webkit-transform: translate(-50%,-50%);
}
css实现垂直居中的几种方法的更多相关文章
- 顽石系列:CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- [转]-CSS 元素垂直居中的6种方法
原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...
- CSS 元素垂直居中的 6种方法
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...
- 纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...
- css 水平居中垂直居中的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS实现垂直居中的7种方法
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
随机推荐
- mybatis 问题
applicationContext.xml报错https://bbs.csdn.net/topics/392184546MyBatis SqlSessionFactory的几种常见创建方式https ...
- JObject 用法 、JProperty 用法、JArray 用法 Linq 转 Json
1.使用LINQ to JSON前,需要引用Newtonsoft.Json的dll和using Newtonsoft.Json.Linq的命名空间.LINQ to JSON主要使用到JObject, ...
- C# 中的集合(Array/ArrayList/List<T>/HashTable/Dictionary)
int [] numbers = new int[5]; // 长度为5,元素类型为 int. string[,] names = new string[5,4]; // 5*4 的二维数组 byte ...
- 20170714xlVba多个工作簿转多个Word文档表格
Public Sub SameFolderGather() Application.ScreenUpdating = False Application.DisplayAlerts = False A ...
- php--------对象(object) 与 数组(array) 的转换
php开发中常常用到数组,sql数据都是数组,数组和对象用的也是比较多的,常常相互转化,数组是PHP的灵魂,非常强大,面向对象编程也是挺方便的. /** * 数组 转 对象 * * @param ar ...
- mate桌面xrdp无法登陆问题
vi /usr/libexec/xrdp/startwm.sh 或者/etc/xrdp/startwm.sh: 找到相应的发行版本,增加mate-session如下所示: # el if [ -r ...
- Java基础-String和StringBuilder类型(11)
String类概述 字符串是由多个字符组成的一串数据字符串可以看成是字符数组 构造方法 public String(String original)public String(char[] value ...
- PHP函数总结 (四)
<?php/** * 引用参数: * 1.PHP默认按值传递参数,父程序(调用函数)与子程序(函数)的数值分别存储与不同的内存区块: * 2.引用传递参数,加符号 & :它是把父程序的数 ...
- inherit
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace { cl ...
- oo第四篇博客作业
测试与正确性论证的效果差异及各自的优缺点: 测试针对一些典型的输入情况进行方法验证,可操作性更强,结果直观.但不能完全覆盖所有的输入情况. 正确性论证则是根据代码逻辑从所有的方面对方法进行论证,可操作 ...