zoukankan      html  css  js  c++  java
  • css实现元素的居中

    css样式实现居中

    左右居中:

    1,text-align: center;//实现行内元素的左右居中显示

    2,margin:0 auto;//实现块级元素的左右居中显示

    垂直居中:

    1,在固定高度的情况下,使用line-height:父元素高度;实现行内元素的垂直居中。

    2,利用position: relative;、margin-top:-(盒子的高度的一半);、top:50%;实现垂直居中,相对定位可以使用top,top占据父元素高度一半,margin-top设置负数,盒子向上挪动自身高度一半实现居中。

    3,利用position: relative;、transform: translateY(-50%);、top:50%;实现垂直居中,相对定位可以使用top,top占据父元素高度一半,transform: translateY(-50%);使得盒子向上挪动自身高度一半实现居中。

    4,父元素设置display: table;
    子元素设置display: table-cell;vertical-align: middle;//实现垂直居中
    text-align: center;//子元素前面的样式加上这句实现垂直和左右居中


    同时实现垂直和左右居中

    1,子绝父相,子元素样式设置:
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;

    2,弹性盒子flex实现居中
    display: flex;
    align-items: center; /*定义父元素的元素垂直居中*/
    justify-content: center; /*定义子元素的里的元素水平居中*/

    业精于勤,荒于嬉,行成于思,毁于随~
  • 相关阅读:
    如何安装配置ulipad
    python链接mysql的代码
    python 模块
    python 查找关键词在百度的排名
    python 类和对象
    python beautifulsoup多线程分析抓取网页
    python 函数关键参数
    python 批量下载文件
    python 语言有哪些特点
    python 类和对象的特点
  • 原文地址:https://www.cnblogs.com/yu-tang/p/12107523.html
Copyright © 2011-2022 走看看