前端时间在面试过程中问到了父元素中子元素水平和垂直居中的实现方法,因为平时疏于整理,只想到两种,现在回想到这个问题,所以针对各种情况集中整理一下。

首先看页面结构和元素的基本样式:

<div class="parent" style="width: 400px;height: 200px;background: #797099;">
<div class="child" style="width: 200px;height: 100px;background: #eee;"></div>
</div>

注:为了便于演示,这里给父元素和子元素都设置了宽高,但是实际情况下,这两者的宽高经常都是未知的。

要实现的效果如下:

1、父元素设置高度等于行高

只在父元素高度已知,并且子元素是文本的情况下适用。

2、子元素相对定位

这种方法只在子元素宽高已知的情况下适用。

3、子元素相对于父元素绝对定位,并配合使用负值的 margin

最常见的方法,这种方法只能在子元素宽高已知的情况下使用。

4、子元素相对父元素绝对定位,并使用 calc() 计算属性

思想同上一种方法,只不过用计算属性替代了偏移量和 margin

5、子元素相对于父元素绝对定位(偏移量都为0),子元素设置margin:auto;

这种方式同样只在子元素高宽已知的情况下使用。

6、父元素设置 display:table-cell 和 vertical-align:middle; 子元素设置 margin: auto;(低版本IE会有问题)

7、父元素设置  display:table-cell 以及内容的水平和垂直居中,子元素设置为行内块(低版本IE没有问题)

8、父元素 display:flex; 子元素 margin:auto;

最简单的方式,子元素宽高已知未知的情况都适用。 

9、父元素设置 display:flex; 以及内容的水平和垂直居中(有兼容问题)

10、子元素相对父元素决定定位,并使用 transform 属性

这种方式和第三、四种方法类似,只不过是用了 translate 偏移量实现了负值 margin 的效果。

不过不同的地方在于,使用 translate 对子元素的宽高没有要求,在未知宽高的情况下依然适用。

这种方式在子元素是单行或多行文本的时候要求垂直居中的情况下十分适用。

 

css元素水平垂直居中的十种方法的更多相关文章

  1. CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  2. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  3. CSS元素水平垂直居中的方法

    1.  元素水平居中 1.1  设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...

  4. css元素水平垂直居中

    温习一下元素水平垂直居中的几种方法 元素有具体宽度 1.absolute+负边距 .LV_center{ border: 1px solid red; position: absolute; widt ...

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

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

  6. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  7. CSS布局:元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  8. css进阶 04-如何让一个元素水平垂直居中?

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  9. 【Web】CSS实现绝对定位元素水平垂直居中

    网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. 海量数据集利用Minhash寻找相似的集合【推荐优化】

    MinHash 首先它是一种基于 Jaccard Index 相似度的算法,也是一种 LSH 的降维的方法,应用于大数据集的相似度检索.推荐系统.下边按我的理解介绍下MinHash 问题背景 给出N个 ...

  2. iOS开发之UICollectionViewController

    1.概述 UICollectionView控件主要是用来做九宫格的,类似于android中的GridView控件.其用法与UITableView一样,首先要使控制器遵守数据源协议,再将控制器设置为UI ...

  3. 修复关于apache-xampp的问题:Port 443 in use by “vmware-hostd.exe”!

    内容提要:复关于apache-xampp的问题:Port 443 in use by “vmware-hostd.exe”!在电脑里装了VMware后,再要装xampp,十有八九就会出现这个问题: 复 ...

  4. CentOS6.5下安装oracle11gR2

    安装前须知 内存(RAM)的最小要求是 1GB,建议 2GB 及以上. 虚拟内存 swap 建议:内存为 1GB~2GB 时建议swap大小为内存大小的 1.5 倍:内存为 2GB~16GB 时建议s ...

  5. The superclass “javax.servlet.http.HttpServlet" was not found on the Java Build Path错误

    1.异常信息 创建maven web项目时,出现 The superclass "javax.servlet.http.HttpServlet" was not found on ...

  6. macOS平台下虚拟摄像头的研发总结

    一.背景介绍 虚拟摄像头,顾名思义,就是利用软件技术虚拟出一个摄像头硬件设备供用户使用.当我们需要对视频图像进行处理再输出时,虚拟摄像头就具备非常大的价值了.关于如何在Windwos上实现一个虚拟设备 ...

  7. C语言枚举类型(Enum)深入理解

    在实际编程中,有些数据的取值往往是有限的,只能是非常少量的整数,并且最好为每个值都取一个名字,以方便在后续代码中使用,比如一个星期只有七天,一年只有十二个月,一个班每周有六门课程等. 以每周七天为例, ...

  8. nano使用介绍

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. GNU nano是Unix系统下一款常用的文本编辑器,以简单易用著称.与之相比,功能更强大的Vi和Emac ...

  9. 重新认识JavaScript里的数据类型

    一.序 数据类型,平时天天在用,今日闲暇便重新阅读了JavaScript数据类型这块,才发现平时用的时候有许些错误和不足,且对此深有感悟,便写下这篇文章加以巩固基础知识并有空翻出来温故而知新. 二.概 ...

  10. c++标准库容器【转】

    C++最原始的容器之一是数组.数组的特点有: 1.大小固定 2.单独存在的数组建立在栈上,作为对象成员存在的数组建立在堆上还是栈上则要看作为宿主对象是被建立在堆上还是栈上.栈空间是有限的,所以如果数组 ...