总结一下平时使用CSS技巧使元素达到水平居中效果

  相对定位(或绝对定位)实现水平垂直居中:

 element{
position:relative; /*这个属性也可以是absolute*/
width:200px; /*宽度按自己的要求设定*/
height:500px; /*高度按自己的要求设定*/
margin-left: -100px; /*这个值是宽度的一半,如宽度设置了100px,则这个属性的值就是-50px*/
margin-top: -250px; /*这个值是高度的一半*/
left: 50%;
top: 50%;
}

 缺点:需要提前知道元素的尺寸。否则无法精确调整 margin 的值

但是有一个替代方案就是使用CSS3的 transform 属性。手机兼容性良好

 element{
width: 400px;
height: 500px;
position:relative; /*这个属性也可以是absolute*/
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

  上面代码使用 transform 代替了 margin , transform 中 translate 偏移的百分比值是相对于元素自身大小的。

  优点:无论定位元素的尺寸是多少,元素的显示方式都是水平垂直居中显示的。

  绝对定位实现水平居中:

 element{
position:absolute; /*这里只能使用绝对定位元素*/
margin: auto;
left:;
right:;
top:;
bottom:;
}

  具有流体特性绝对定位元素的 margin: auto; 的填充规则和普通流体元素一模一样:

    1. 如果一侧定值, 一侧auto, auto为剩余空间大小;

    2. 如果两侧都是auto,则平分剩余空间;

使用CSS定位元素实现水平垂直居中效果的更多相关文章

  1. css定位“十字架“之水平垂直居中

    1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div. 看实现代码: <!DOCTYPE HTML P ...

  2. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  3. CSS(3)多种方法实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  4. css实现水平/垂直居中效果

    一.如果是已知宽高的元素做水平/垂直居中效果的话,可以直接用具体的数值指定定位布局或偏移布局,这个就不过多讨论.这里主要介绍在不知宽高或需要弹性布局下的几种实现方式. 二.1.table表格法思路:显 ...

  5. css知识笔记:水平垂直居中(别只看,请实操!!!)

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  6. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  7. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  8. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  9. css选择器用法,使用css定位元素,css和xpath元素定位的区别

    css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...

随机推荐

  1. SRM476

    250pt 题意:饲养N<=50只Badgers,每只食量是X[i],当没看到别的一只Badgers吃东西时,它的食量就会增加Y[i],现在一共用P的粮食,问最多能养的起多少只獾. 思路:枚举一 ...

  2. poj2478 Farey Sequence 欧拉函数的应用

    仔细看看题目,按照题目要求 其实就是 求 小于等于n的 每一个数的 欧拉函数值  的总和,为什么呢,因为要构成 a/b 然后不能约分  所以 gcd(a,b)==1,所以  分母 b的 欧拉函数值   ...

  3. presto调研和json解析函数的使用

    presto简单介绍 presto是一个分布式的sql交互式查询引擎.可以达到hive查询效率的5到10倍.支持多种数据源的秒级查询. presto是基于内存查询的,这也是它为什么查询快的原因.除了基 ...

  4. NLTK之WordNet 接口【转】

    转自:http://www.cnblogs.com/kaituorensheng/p/3149095.html   WordNet是面向语义的英语词典,类似于传统字典.它是NLTK语料库的一部分,可以 ...

  5. FastReport报表设计(仔细看)

    FastReport报表设计 2011-06-16 16:56:19|  分类: 系统开发|举报|字号 订阅     下载LOFTER我的照片书  |     目录 5.1 前言 5.2 基本概念及操 ...

  6. Android-Kotlin-代理和委托

    代理和委托,在生活中的案例有很多: 例如:小明工作很忙,需要办理银行卡,此时他委托给>>小李去给自己办理银行卡,小李来到办理中心 把自己的身份证/小李的身份证,给办理人员,说是小明委托我, ...

  7. 【计算机网络】 DNS学习笔记 (>﹏<)

    参考书籍 <计算机网络-自顶向下>  作者 James F. Kurose   DNS的作用   DNS是因特网的目录服务 DNS是因特网的目录服务,它提供了主机名到IP地址映射的查询服务 ...

  8. 关于.net core使用nginx做反向代理获取客户端ip的问题

    1.正常情况下.net core获取客户端ip是比较简单的 /// <summary> /// 获取客户Ip /// </summary> /// <param name ...

  9. Bs4 BeautifulSoup取值

    原文网址:https://blog.csdn.net/u010244522/article/details/79627073 从网页获取HTML数据后,获取对应标签.属性的值 取值方法主要有以下几种: ...

  10. LOJ#3093. 「BJOI2019」光线(递推+概率期望)

    题面 传送门 题解 把\(a_i\)和\(b_i\)都变成小数的形式,记\(f_i\)表示\(1\)单位的光打到第\(i\)个玻璃上,能从第\(n\)个玻璃下面出来的光有多少,记\(g_i\)表示能从 ...