css居中问题:水平居中、垂直居中
亲们支持我的新博客哦==》原文地址
)
本篇文章所有演示代码下载==》github/calamus0427
css水平垂直居中是面试时候遇到最多的问题,我总结一下大部分解决方案
水平居中:
1.margin:0 auto;
垂直居中:
1.绝对定位-宽高的一半
优缺点:必须知道元素的宽高,但是方法很快捷
2.绝对定位和margin:auto;
不用知道元素的宽高,但是绝对定位会影响文档流及之后的其他元素的布局,使得这个方案的可食用性较差
3.transfrom
这个方法比较高级了,用到了形变,据我所知很多大神喜欢使用这个方法进行定位,逼格很高的,学会后面试一定要用!这个是不需要知道居中元素的宽高就可以使用的,在面试中大部分人会问如果不知道宽高该如何居中,答这个,加分!对transform不了解的同学可以查阅一下资料了解一下!
4.diplay:table-cell
表格布局,除了历史上的一些诟病,但是还是很多场景可以用到的,兼容性也很好,flex解决不出来的问题可以尝试
5.diplay:flex
现在布局的主流,移动端pc端都兼容,布局也很方便,就是为了解决绝对定位而出现的布局方案
如果你连这个方案都没有想出来,那么就需要回炉重造一下了
6.diplay:grid
下一代的布局主流,但是现在兼容性还有一些问题
这个方案现在虽然使用的人不多,但是是下一代的主流方案,你可以不是很熟悉,但至少要知道。这个方案会反应你对新技术的追求。现在很多框架都在用栅格布局的方案,css开始标准化山歌布局。面试中展现你对技术热点的追求,展现自己的优势是很重要的。
7.vertical-align:middle;
这方法不常见,也不失为一种好方法可以让别人刮目相看
css居中问题:水平居中、垂直居中的更多相关文章
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- css居中小结
从css入门就开始接触,无所不在的,一直备受争议的居中问题. css居中分为水平居中和垂直居中,水平居中方式也较为常见和统一,垂直居中的方法就千奇百怪了. 博客原文地址:Claiyre的个人博客 ht ...
- CSS居中完全指南——构建CSS居中决策树
CSS居中完全指南--构建CSS居中决策树 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到CSS居中问题时有章可循. 参考Centering in CSS: A Com ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- CSS水平居中/垂直居中的N个方法
我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...
- css垂直居中怎么设置?文字上下居中和图片垂直居中
css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...
- CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
CSS 实现盒子模型水平居中 水平居中效果图如下: HTML: CSS 全局样式: 方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候) 方法二:text-align + disp ...
- css 水平居中垂直居中的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS实现元素水平垂直居中—喜欢对称美,这病没得治
[TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
随机推荐
- JS 缓存
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串. 例: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON. ...
- Linux yum仓库配置
yum仓库配置 10.1 概述 YUM(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包 ...
- 让邮件服务器发出的Email不被认为是垃圾邮件
配置一个Email服务器很简单,用Postfix等软件稍微配置一下就可以了,几分钟搞定. 但Email服务器发出去的Email很可能经常被人当成垃圾邮件,怎么配置Email服务器才能让Email服务器 ...
- 虚拟机ubuntu新增挂载点进行磁盘扩展
参考: http://m.blog.csdn.net/blog/pcsxk/38501579 一.vmware下扩展原来的磁盘空间 这个比较直观 1.关机状态下,选择磁盘->实用工具->扩 ...
- shell脚本报错:-bash: xxx: /bin/sh^M: bad interpreter: No such file or directory --引用自http://blog.csdn.net/xiaaiwu/article/details/49126777
windows下编辑然后上传到linux系统里执行的..sh文件的格式为dos格式.而linux只能执行格式为unix格式的脚本. 我们可以通过vi编辑器来查看文件的format格式.步骤如下: 1. ...
- Python实例讲解 -- wxpython 基本的控件 (按钮)
使用按钮工作 在wxPython 中有很多不同类型的按钮.这一节,我们将讨论文本按钮.位图按钮.开关按钮(toggle buttons )和通用(generic )按钮. 如何生成一个按钮? 在第一部 ...
- linux 简单笔记
Linux查看端口使用状态.关闭端口方法 http://blog.csdn.net/wudiyi815/article/details/7473097
- 【springmvc】之使用jQuery接收前端传入List对象
前端代码: <form id="person_add" method="post" action="user"> <tab ...
- 【mysql】ICP下mysql执行计划的一次解析
mysql版本 [root@xxxx]# mysql --version mysql Ver 15.1 Distrib 5.5.52-MariaDB, for Linux (x86_64) using ...
- 单元素枚举类型singleton模块
public enum Elvis { INSTANCE; public void leaveTheBuilding() { System.out.println("Whoa baby, I ...