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

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

一、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. 介绍一种android的裸刷机方法(fastboot刷机实质)

      fastboot刷机的前提是你的开发板uboot良好并能正常启动进入fastboot模式,你的开发版的nand分区已存在.对于Android的uboot而言, 已经实现了fastboot命令,当你 ...

  2. kitkat-s5p4418drone 记录

      查看帮助: ./device/nexell/tools/build.sh  -h   编译u-boot: ./device/nexell/tools/build.sh -b drone2 -t u ...

  3. Allocation Sinking Optimization

    LuaJIT Sponsorship Program http://luajit.org/sponsors.html Sponsorship for allocation/store sinking ...

  4. Python之numpy基本指令

    https://blog.csdn.net/mmm305658979/article/details/78745637 # -*- coding: utf-8 -*- 多加练习才是真 import n ...

  5. jquery ztree 刷新后记录折叠、展开状态

    ztree :http://www.ztree.me/v3/main.php 项目中用到了这个插件,刚好也有需求 在页面刷新后,保存开始的展开.折叠状态, 其实 dtree: http://www.d ...

  6. sqlserver如何读写操作windows系统的文件

    DECLARE   @object   int     DECLARE   @hr   int     DECLARE   @src   varchar(255),   @desc   varchar ...

  7. 小米范工具系列之七:小米范 web目录扫描器2.x版本发布

    小米范web目录扫描器主要功能是探测web可能存在的目录及文件. 此工具使用java 1.8以上版本运行. 小米范web查找器2.x版本针对1.x版本(参考http://www.cnblogs.com ...

  8. Spark的RDD原理以及2.0特性的介绍

    转载自:http://www.tuicool.com/articles/7VNfyif 王联辉,曾在腾讯,Intel 等公司从事大数据相关的工作.2013 年 - 2016 年先后负责腾讯 Yarn ...

  9. cocos代码研究(11)ActionManager类学习笔记

    理论部分 ActionManager是一个单例类,管理所有动作. 通常你不需要直接使用这个类.大多情况下,你将使用Node的接口,它提供了更友好的封装 但也有一些情况下,你可能需要使用这个单例. 示例 ...

  10. JavaScript在页面中的引用方法

    现在前端开发越来越流行,框架也越来越多,像ExtJs.JQuery.Bootstrap等.虽然入行这么多年,但是感觉自己在前端方面还是存在基础不牢的地方,特别是CSS和JS.因此最近打算重新阅读这方面 ...