zoukankan      html  css  js  c++  java
  • css的垂直居中与水平居中

    css的垂直居中与水平居中

    一、 块级盒子水平居中

    1. width 必须有宽度
    2. 盒子的左右外边距 auto
     100px;
    height: 100px;
    margin: 0 auto;
    

    二、 行盒/行块盒/文字水平居中

    只需要在父级元素使用 text-align: center; 即可

    三、 文字垂直居中

    包裹文字的盒子设置行高等于盒子高度,这样行高的上空隙和下空隙就会把文字内容挤到中间
    如果行高小于盒子高度,文字会偏上,行高大于盒子高度,文字会偏下

    height: 50px;
    line-height: 50px;
    

    四、绝对定位的盒子居中

    加了绝对定位的盒子不能通过 margin:0 auto实现水平居中,但可以通过以下计算方式实现水平和垂直居中

    1. 绝对定位的盒子水平居中

    • 让盒子的左侧移动到父级元素的水平中心位置
    • 让盒子向左移动自身宽度的一半
                 100px;
                height: 100px;
                background-color: green;
                position: absolute;
                /*让盒子的左侧移动到父级元素的水平中心位置*/
                left: 50%;
                /*1. 使用margin-left: -50px;需要自己计算出盒子自身宽度的一半,如果盒子宽度改变了,这里也要改*/
                /*margin-left: -50px;*/
                /*2. transform: translateX(-50%);过渡,自动计算自身盒子的一半宽度*/
                transform: translateX(-50%);
    

    2. 绝对定位的盒子垂直居中

    • 让盒子的上侧移动到父级元素的水平中心位置
    • 让盒子向上移动自身宽度的一半
                 100px;
                height: 100px;
                background-color: green;
                position: absolute;
                /*让盒子的上侧移动到父级元素的垂直中心位置*/
                top: 50%;
                /*1. 使用margin-top: -50px;需要自己手动计算出盒子自身高度的一半,如果盒子高度改变了,这里也要改*/
                /*margin-top: -50px;*/
                /*2. 使用calc函数上移自身高度50%,自动计算*/
                /*margin-top: calc(-$height / 2);*/
                /*3. transform: translateY(-50%);移动自身盒子的一半高度*/
                transform: translateY(-50%);
    

    五、使用flex布局实现水平和垂直居中

    1. display: flex;使用flex容器布局
    2. justify-content: center;/默认情况下,flex布局容器中flex项目水平居中/
    3. align-items: center;flex布局容器中flex项目在交叉轴居中对齐,默认情况下是垂直居中

    flex布局实现水平和垂直居中代码示例

    1. 创建html
    <div class="one">
        <div class="two"></div>
    </div>
    
    1. 创建css
            .one{
                display: flex;
                /*flex布局容器中flex项目水平居中*/
                justify-content: center;
                /*flex布局容器中flex项目在交叉轴居中对齐,默认情况下是垂直居中*/
                align-items: center;
                 400px;
                height: 400px;
                background-color: pink;
            }
            .two{
                 200px;
                height: 200px;
                background-color: black;
            }
    
  • 相关阅读:
    25个PHP游戏编程脚本代码(转)
    [AJAXJSP]使用DWR框架验证用户名是否存在
    [AJAXJSP]验证用户名存在
    [Java基础]多线程求和小例子
    [JAVA算法]求子数组的最大和
    [JQury] slideToggle闪烁问题及解决办法
    [JAVA算法]递归求Fibbonicc序列方法
    Easy ui Datagrid(下拉、复选、只输入数字、文本) 追加、删除、更改
    Easy ui DataGrid 添加复选框 与 下拉
    Easy ui DataGrid 列文字多串行问题解决方案
  • 原文地址:https://www.cnblogs.com/yloved/p/13056612.html
Copyright © 2011-2022 走看看