zoukankan      html  css  js  c++  java
  • css垂直居中的8方法

    摘抄自http://www.dagoogle.cn/n/704.html,仅供自己学习参考

    CSS 垂直居中的 8 种方法

    1. 通过 verticle-align:middle 实现 CSS 垂直居中。

       通过通过 vertical-align:middle 实现 CSS 垂直居中是最常使用的方法,但是有一点需要格外注意,vertical 生效的前提是元素的 display:inline-block。

    1. 通过 display:flex 实现 CSS 垂直居中。

    随着越来越多浏览器兼容 CSS 中的 flexbox 特性,所以现在通过“display:flex”实现 CSS 水平居中的方案也越来越受青睐。

    通过 display:flex 实现 CSS 垂直居中的方法是给父元素 display:flex;而子元素 align-self:center;

    这个跟 CSS 水平居中的原理是一样的,只是在 flex-direction 上有所差别,一个是 row(默认值),另外一个是 column。

    1. 通过伪元素:before 实现 CSS 垂直居中。

    具体方式是为父元素添加伪元素:before,使得子元素实现垂直居中。

    1. 通过 display:table-cell 实现 CSS 垂直居中

    给父元素 display:table,子元素 display:table-cell 的方式实现 CSS 垂直居中。

    1. 通过隐藏节点实现 CSS 垂直居中。

    创建一个隐藏节点#hide,使得隐藏节点的 height 值为剩余高度的一半即可。

    这种方法也适用于 CSS 水平居中,原理一样。

    1. 已知父元素高度通过 transform 实现 CSS 垂直居中。

    给子元素的 position:relative,再通过 translateY 即可定位到垂直居中的位置。

     7. 到垂直居中的位置。

    8. 通过 line-height 实现 CSS 垂直居中。

    设置子元素的 line-height 值等于父元素的 height,这种方法适用于子元素为单行文本的情况。

  • 相关阅读:
    动态规划-数位dp-600. 不含连续1的非负整数
    动态规划-数位dp-1012. 至少有 1 位重复的数字
    动态规划-数位dp-902. 最大为 N 的数字组合
    优先队列-1439. 有序矩阵中的第 k 个最小数组和
    再见
    [JSOI2008]星球大战——并查集+逆向思维
    洛谷p1330 封锁阳光大学(二分图染色)
    快速幂
    最小生成树——联络员 Kruskal
    最小生成树——繁忙的都市
  • 原文地址:https://www.cnblogs.com/sinceForever/p/14922546.html
Copyright © 2011-2022 走看看