水平居中的方法:

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. STL数据结构

    priority_queue "C++ reference"上如此解释priority queue:"This context is similar to a heap, ...

  2. Jira 自定义工作流

    一.添加修改工作流 打开 设置--问题--工作流 复制一个工作流,然后进去编辑页面 添加状态 增加转换动作 切换到文本,设置跳转过程中的事件 针对Stop Progress事件,修改跳转界面(界面需先 ...

  3. 给定一个 hashMap 最终输出最大值的键

    /** * * 类 描 述:机试题: 给定一个 hashMap 最终输出最大值的键 * 作 者: 赵 鹏 * 时 间:2017年7月4日 下午6:51:06 */ public class Test ...

  4. java List<String>的初始化

    今天在处理生成excel的时候用到了java的list,但是需要直接赋值固定的几个变量,如果先初始化然后add的方法: List<String> name = new ArrayList( ...

  5. php技术–php中感叹号!和双感叹号!!的用法(三元运算)

    ---恢复内容开始--- if(文章==有用){狂点我;} 在php持术或其他语言中我们经常会看到感叹号的用法,有一定程序语言基础的朋友都知道单个感叹号的作用是取反的意思,也就是取当前结果的反面,如: ...

  6. js cookies

    cookie用於識別用戶,存儲在訪問者的計算機里,當用戶首次使用瀏覽器時,會發送cookie.用戶可以創建和獲取cookie. cookie可以存儲用戶名字.用戶密碼和訪問時間等. document. ...

  7. Luogu3297 SDOI2013逃考(半平面交+最短路)

    把每个人的监视范围看成点,相邻的两个监视范围连边,那么跑一遍最短路就可以了(事实上边权都为1可以直接bfs).显然存在最优路线没有某个时刻同时被多于两人监视,要到达另一个区域的话完全可以经过分界线而不 ...

  8. Harmonic Number (II) LightOJ - 1245 (找规律?。。。)

    题意: 求前n项的n/i  的和 只取整数部分 暴力肯定超时...然后 ...现在的人真聪明...我真蠢 觉得还是别人的题意比较清晰 比如n=100的话,i=4时n/i等于25,i=5时n/i等于20 ...

  9. day30 item系列

    item 会将数据操作类似于字典的操作具体用到的方法 __getitem__(self, item): __setitem__(self, key, value): __delitem__(self, ...

  10. UOJ#192. 【UR #14】最强跳蚤

    题目链接 http://uoj.ac/problem/192 暑期课第二天 树上问题进阶 具体内容看笔记博客吧 题意 n个节点的树T 边有边权w 求满足(u, v)上所有边权乘积为完全平方数的路径有多 ...