水平居中的方法:

1、父级text-align:center;

.parent{
text-align: center;
}
.child{
display: inline-block;
}

2、table配合margin

.child{
display:table;
margin: 0 auto;
}

3、使用定位

.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
transform: translateX(-50%);
}

垂直居中的方法:

1、table-cell配合vertical-align

.parent{
display: table-cell;
vertical-align:middle;
}

2、absolute配合tranform

.parent{
position:relative;
}
.child{
position:absolute;
top: 50%;
transform: translateY(-50%);
}

3、全能的flex

.parent{
display: flex;
justify-content: center;
align-items: center;
}

css3实现水平、垂直居中的更多相关文章

  1. css3实现水平垂直居中------(特别注意,里边的固定还是不固定)

    a,----定位方式(父元素宽高固定,子元素宽高固定) <div class="Father"> <div class="children"& ...

  2. css3实现水平垂直居中

    1.transform实现居中(未设宽高) <div id="wrap">内容</div> <style> #wrap{ padding:50p ...

  3. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  4. 用CSS/CSS3 实现水平居中和垂直居中,水平垂直居中的方式

    一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...

  5. css3种不知道宽高的情况下水平垂直居中的方法

    第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...

  6. 水平垂直居中div(css3)

    一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...

  7. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  8. css3不定宽高水平垂直居中

    1 justify-content:center;//子元素水平居中 2 align-items:center;//子元素垂直居中 3 display:-webkit-flex; 在父级元素上面加上上 ...

  9. CSS3/CSS之居中解析(水平+垂直居中、水平居中,垂直居中)

    首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...

  10. css3水平垂直居中(不知道宽高同样适用)

    css水平垂直居中 第一种方法: 在父div里加: display: table-cell; vertical-align: middle; text-align: center; 内部div设置: ...

随机推荐

  1. [转帖]ASP.NET的版本?

    ASP.NET的版本? https://www.cnblogs.com/guogangj/p/8526365.html 问题源于这么一本书: <ASP.NET 4 解密(卷1)>,这本书大 ...

  2. [日常工作]非Windows Server 系统远程经常断以及提高性能的方法

    1. 公司内有不少windows xp windows 7 这样的操作系统的机器在机房里面用来跑自动化脚本或者是其他用处. 经常有人反馈机器过一段时间连不上, 其实这一点是一个非常小的地方 很多机器上 ...

  3. [书摘]HTTPS--From图解HTTP

    1.  HTTP存在的安全性风险: 1) 通信过程使用明文,容易被窃听 2) 不验证通信方的身份,可能遭遇伪装 3) 不验证通信数据包的完整性,可能遭遇篡改 2. HTTP+加密+认证+完整性保护=H ...

  4. 如何取消浏览器护眼色 Lodop打印图片有窗口颜色的边框

    Lodop打印图片出现了边框,然而通常情况下是没有边框的,由于Lodop是基于本机的ie进行解析的,和IE的设置有关.用户的电脑和习惯千差万别,有人喜欢给浏览器加上护眼色,而这一个行为可能导致Lodo ...

  5. pgm17

    这部分讨论决策理论与 PGM 的关系,一个主要的思路就是将决策与 PGM 的 inference 完美的融合在一起. MEU 为了引入决策理论中的 maximum expected utility 原 ...

  6. Sql Server 之 Merge

    转载:http://blog.csdn.net/zmoneyz/article/details/38404111 现在我们来创建了两个表Person和UserLogin Person表如下: User ...

  7. 洛谷P3628 [APIO2010]特别行动队(动态规划,斜率优化,单调队列)

    洛谷题目传送门 安利蒟蒻斜率优化总结 由于人是每次都是连续一段一段地选,所以考虑直接对\(x\)记前缀和,设现在的\(x_i=\)原来的\(\sum\limits_{j=1}^ix_i\). 设\(f ...

  8. 自学Python2.8-条件(if、if...else)

    自学Python之路 自学Python2.8-条件(if.if...else) 1.if 判断语句 if语句是用来进行判断的,其使用格式如下:  if 要判断的条件: 条件成立时,要做的事情 当“判断 ...

  9. helm详解

    helm 可以理解为 Kubernetes 的包管理工具,可以方便地发现.共享和使用为Kubernetes构建的应用. 一.基本概念1.Helm的三个基本概念Chart:Helm应用(package) ...

  10. UVALive - 6436(DFS)

    题目链接:https://vjudge.net/contest/241341#problem/C 题目大意:给你从1到n总共n个数字,同时给你n-1个连接,同时保证任意两个点之间都可以连接.现在假设任 ...