css 垂直居中

我们知道在css中有元素的水平、垂直居中,而对元素水平居中是很简单的:

如果是行内元素,则对它的父元素采用text-algin:center;如果是一个块级元素则采用margin: auto。

但是提到元素的垂直居中,情况并不是这么良好。特别是在元素尺寸不固定的时候,更难处理。

html代码:

   <div> <div>center</div> </div>

css代码:

  margin: 0 auto;   text-align: center;

1122059-20170412103436376-340585462.png

对于垂直居中我们该怎么办?

 

使用绝对定位的解决方案:

position: absolute;
          top: 50%;
          margin-top: -20px;
     
width: 80px;height: 40px;    

1122059-20170412104412610-1788324884.png

漂亮的垂直居中

 position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -20px;
          margin-left: -40px;
width: 80px;height: 40px;

1122059-20170412104551969-986239484.png

上面的垂直居中方法,要求元素要有固定的宽度和高度。原理就是把设置绝对定位,让元素的左上角(top、left)放置在视口(具有定位属性的祖先元素)的正中心。

然后利用负的外边距把它向左,向上移动(移动距离相当于自身宽高的一半),最后的效果就是把自身的正中心放置在视口的正中心。

利用强大的calc()函数,上面的代码还可以简写成:

 position: absolute;
          top: calc(50% - 20px);//"-"前后有空格,为了兼容
          left: calc( 50% - 40px);   
 width: 80px;height: 40px;

效果如上面。

这个方法的最大局限性是,它要求元素的宽高是固定的。但是通常我们的尺寸是根据内容自身来决定的,有人想到用百分比值,但是通常属性(包括margin)的百分比值都是以父元素的尺寸为基准进行解析的。

有没有一个属性它是以自身的宽高作为解析基准呢?有!

css3的变形属性中的translate()移动函数可以做到这一点。

 

我们知道:translate(x,y)表示水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)。在它的函数里使用百分比值是以这个元素的自身宽高为基准进行解析的。

所以,采用百分比的css变形对元素进行偏移,就不要考虑元素固定打尺寸大小了。不过有些浏览器对css3变形还不是充分支持。

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

效果同上。

采用flexbox解决方案

最佳解决方案就是伸缩盒flexbox。

首先可以给父元素设置display:flex,再给元素自身设置margin:auto。这里的margin不仅在水平方向上将元素居中,垂直方向上也是一样。

<div id="d"> <div> center </div> </div>

css代码:

#d
{display: flex;} #d>div{ background: wheat; margin: auto;}

1122059-20170412113902156-1471047445.png

 采用

display: flex;
justify-content: center;
align-items: center;

也可以让内部文本居中。

 

热门文章

暂无图片
编程学习 ·

Java的ConcurrentHashMap 底层了解

最近有人问Java8 中ConcurrentHashMap 底层实现,这里简单列下。大家都知道 Java8 对 HashMap 、ConcurrentHashMap 进行了改进,前者非线程安全,后者线程安全。HashMap在Java 7 中,采用哈希表结构在Java 8 中,采用哈希表 + 红黑树ConcurrentHashMap在Java 7 中,采用分段的…
暂无图片
编程学习 ·

MIT 计算机操作环境导论Missing Semester Lesson 10 Q&A

最后一节课,我们回答学生提出的问题:学习操作系统相关内容的推荐,比如进程,虚拟内存,中断,内存管理等你会优先学习的工具有那些?使用 Python VS Bash脚本 VS 其他语言?source script.sh 和 ./script.sh 有什么区别?各种软件包和工具存储在哪里?引用过程是怎样的? /bi…
暂无图片
编程学习 ·

2 css

css的三大特性 css有三个非常重要的三个特性;层叠性 继承性 优先级 层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性 主要解决样式冲突的问题 原则 样式冲突,遵循原则上就近原则,那个样式离结构近,就执行那个样式 样式不冲突,不…
暂无图片
编程学习 ·

低功耗蓝牙(BLE)和传感器的使用

一、低功耗蓝牙的使用Android中关于蓝牙的开发文档,可以参考Google提供的官方蓝牙文档:https://developer.android.google.cn/guide/topics/connectivity/bluetooth.html在Android开发中,应用可通过官方提供的蓝牙API执行以下操作:扫描其他蓝牙设备查询本地蓝牙适配器的配对…
暂无图片
郑州普通话 ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络&#xff1a;信息往一个方向流动。包括MLP和CNN 循环神经网络&#xff1a;信息循环流动&#xff0c;网络隐含层输出又作为自身输入&#xff0c;包括RNN、LSTM、GAN等。 RNN模型结构如下图所示&#xff1a; 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
代理记账 ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络&#xff1a;信息往一个方向流动。包括MLP和CNN 循环神经网络&#xff1a;信息循环流动&#xff0c;网络隐含层输出又作为自身输入&#xff0c;包括RNN、LSTM、GAN等。 RNN模型结构如下图所示&#xff1a; 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
cgfy ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络&#xff1a;信息往一个方向流动。包括MLP和CNN 循环神经网络&#xff1a;信息循环流动&#xff0c;网络隐含层输出又作为自身输入&#xff0c;包括RNN、LSTM、GAN等。 RNN模型结构如下图所示&#xff1a; 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
coreui ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
未来博客 ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
建站日记 ·

[react] 你觉得react上手快不快?它有哪些限制?

[react] 你觉得react上手快不快&#xff1f;它有哪些限制&#xff1f; 相对vue来说不快。 限制 需要学习JSX需要工程化的配置需要对原生JavaScript有相当的掌握react只是一个UI层面的库&#xff0c;像vue内置了动画处理、keep-alive等功能&#xff0c;react则需要去找第三方库…
暂无图片
mfbz ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络&#xff1a;信息往一个方向流动。包括MLP和CNN 循环神经网络&#xff1a;信息循环流动&#xff0c;网络隐含层输出又作为自身输入&#xff0c;包括RNN、LSTM、GAN等。 RNN模型结构如下图所示&#xff1a; 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
mfbz ·

AOV网是否存在回路-拓扑排序-C++

拓扑排序是对测试AOV网是否存在回路的方法&#xff01; 拓扑排序的过程中&#xff0c;由于需要查找所有以某顶点为尾的弧&#xff0c;即找到该顶点的所有出边&#xff0c;故图要采用邻接表的存储方式。但拓扑排序较邻接表的存储方式有一点不同&#xff0c;由于要查找入度为0的点…
暂无图片
珊珊日记 ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络&#xff1a;信息往一个方向流动。包括MLP和CNN 循环神经网络&#xff1a;信息循环流动&#xff0c;网络隐含层输出又作为自身输入&#xff0c;包括RNN、LSTM、GAN等。 RNN模型结构如下图所示&#xff1a; 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
珊珊日记 ·

AOV网是否存在回路-拓扑排序-C++

拓扑排序是对测试AOV网是否存在回路的方法&#xff01; 拓扑排序的过程中&#xff0c;由于需要查找所有以某顶点为尾的弧&#xff0c;即找到该顶点的所有出边&#xff0c;故图要采用邻接表的存储方式。但拓扑排序较邻接表的存储方式有一点不同&#xff0c;由于要查找入度为0的点…