css3实现水平、垂直居中
水平居中的方法:
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实现水平、垂直居中的更多相关文章
- css3实现水平垂直居中------(特别注意,里边的固定还是不固定)
a,----定位方式(父元素宽高固定,子元素宽高固定) <div class="Father"> <div class="children"& ...
- css3实现水平垂直居中
1.transform实现居中(未设宽高) <div id="wrap">内容</div> <style> #wrap{ padding:50p ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- 用CSS/CSS3 实现水平居中和垂直居中,水平垂直居中的方式
一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...
- css3种不知道宽高的情况下水平垂直居中的方法
第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...
- 水平垂直居中div(css3)
一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...
- css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...
- css3不定宽高水平垂直居中
1 justify-content:center;//子元素水平居中 2 align-items:center;//子元素垂直居中 3 display:-webkit-flex; 在父级元素上面加上上 ...
- CSS3/CSS之居中解析(水平+垂直居中、水平居中,垂直居中)
首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...
- css3水平垂直居中(不知道宽高同样适用)
css水平垂直居中 第一种方法: 在父div里加: display: table-cell; vertical-align: middle; text-align: center; 内部div设置: ...
随机推荐
- STL数据结构
priority_queue "C++ reference"上如此解释priority queue:"This context is similar to a heap, ...
- Jira 自定义工作流
一.添加修改工作流 打开 设置--问题--工作流 复制一个工作流,然后进去编辑页面 添加状态 增加转换动作 切换到文本,设置跳转过程中的事件 针对Stop Progress事件,修改跳转界面(界面需先 ...
- 给定一个 hashMap 最终输出最大值的键
/** * * 类 描 述:机试题: 给定一个 hashMap 最终输出最大值的键 * 作 者: 赵 鹏 * 时 间:2017年7月4日 下午6:51:06 */ public class Test ...
- java List<String>的初始化
今天在处理生成excel的时候用到了java的list,但是需要直接赋值固定的几个变量,如果先初始化然后add的方法: List<String> name = new ArrayList( ...
- php技术–php中感叹号!和双感叹号!!的用法(三元运算)
---恢复内容开始--- if(文章==有用){狂点我;} 在php持术或其他语言中我们经常会看到感叹号的用法,有一定程序语言基础的朋友都知道单个感叹号的作用是取反的意思,也就是取当前结果的反面,如: ...
- js cookies
cookie用於識別用戶,存儲在訪問者的計算機里,當用戶首次使用瀏覽器時,會發送cookie.用戶可以創建和獲取cookie. cookie可以存儲用戶名字.用戶密碼和訪問時間等. document. ...
- Luogu3297 SDOI2013逃考(半平面交+最短路)
把每个人的监视范围看成点,相邻的两个监视范围连边,那么跑一遍最短路就可以了(事实上边权都为1可以直接bfs).显然存在最优路线没有某个时刻同时被多于两人监视,要到达另一个区域的话完全可以经过分界线而不 ...
- Harmonic Number (II) LightOJ - 1245 (找规律?。。。)
题意: 求前n项的n/i 的和 只取整数部分 暴力肯定超时...然后 ...现在的人真聪明...我真蠢 觉得还是别人的题意比较清晰 比如n=100的话,i=4时n/i等于25,i=5时n/i等于20 ...
- day30 item系列
item 会将数据操作类似于字典的操作具体用到的方法 __getitem__(self, item): __setitem__(self, key, value): __delitem__(self, ...
- UOJ#192. 【UR #14】最强跳蚤
题目链接 http://uoj.ac/problem/192 暑期课第二天 树上问题进阶 具体内容看笔记博客吧 题意 n个节点的树T 边有边权w 求满足(u, v)上所有边权乘积为完全平方数的路径有多 ...