布局中常用到的水平垂直居中问题

作为一个前端开发人员,布局是我们日常工作中解除最多的,而水平垂直居中也必不可少的出现,面试中也经常遇到噢~

一、position:absolute(固定宽高)

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;

二、position+transform

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

三、CSS3-Flex布局(ps:本人最常用~嘿嘿)

关于Flex,可以看看阮一峰老师的这篇文章,讲解的很仔细哟~  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

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

css之水平垂直居中方式的更多相关文章

  1. CSS实现水平垂直居中方式

    1.定位 核心代码实现请看示例代码中的注释: <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  2. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  3. 你知道CSS实现水平垂直居中的第10种方式吗?

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  4. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  5. css实现水平垂直居中的几种方式

    梳理下平时常用css水平垂直居中方式- 使用flex布局 HTML <div class="box"> <div class="child"& ...

  6. CSS实现水平垂直居中的方式有哪些?

    CSS实现水平垂直居中的方式有哪些? 基本结构样式: .box { width: 400px; height: 400px; background-color: red; } .inner { wid ...

  7. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  8. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

随机推荐

  1. Modulo operation

    Modulo operation - Wikipedia https://en.wikipedia.org/wiki/Modulo_operation https://baike.baidu.com/ ...

  2. docker网络部分源码分析

    daemon初始化network controller daemon的配置,网络部分的内容在cmd/dockerd/config_common_unix.go中指定,默认设置一般都为空 // daem ...

  3. 【剑指Offer】俯视50题之1-10题

    面试题1赋值运算符函数  面试题2 实现Singleton模式  面试题3 二维数组中的查找   面试题4 替换空格   面试题5 从头到尾打印链表   面试题6 重建二叉树   面试题7 用两个栈实 ...

  4. android 获取经纬度

    android 定位的两种方式:GPS_PROVIDER and NETWORK_PROVIDER 定位的可以借助LocationManager来实现 MainActivity代码 static fi ...

  5. (16)Cocos2d-x 多分辨率适配完全解析

    Overview 从Cocos2d-x 2.0.4开始,Cocos2d-x提出了自己的多分辨率支持方案,废弃了之前的retina相关设置接口,提出了design resolution概念. 3.0中有 ...

  6. Python 开发工具和框架安装

    引言: 其实之前对于 Python,只是知道有这门语言而已.大部分还是使用 .net 开发的,之前也学了 MVC+EF 开发,但是由于工作上完全用不到,也就没有在博客记录学习的东西了. 最近又接触到了 ...

  7. ubuntu16.04(64位)安装 Drcom

    一 : 下载DrClient(DrcomAndPPOE) 解压   下载地址 https://www.baidu.com/s?wd=DrClient(DrcomAndPPOE)&rsv_spt ...

  8. 2018 Multi-University Training Contest 9 Solution

    A - Rikka with Nash Equilibrium 题意:构造一个$n * m$的矩阵,使得$[1, n * m]$ 中每个数只出现一次,并且纳什均衡只出现一次. 思路:从大到小的放置,每 ...

  9. hdu5107 线段树

    hdu 5107 这题说的是给了一个二维的 平面, 平面内有30000个点每个点都有自己的高度,然后又30000次的查询,每次查询给的是(X,Y,K), 要求出set(x,y){x,y|x<=X ...

  10. java第六天

    p37 1.java ant详解 练习8 /** * Created by xkfx on 2017/2/26. */ class A { static int i = 47; } public cl ...