上下左右居中对齐

display:  inline/inline-block

将父元素（容器）设定 text-align: center； 即可左右置中。

display: block

将元素本身的 margin-left 和 margin-right 设定为auto; 即可左右置中。

方法一：Position: Absolute 对齐元素本身

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>上下左右居中对齐</title>

        <style type="text/css">

            #box {

                width: 100px;

                height: 100px;

                border: 2px solid #0000FF;

            }

            #box {

                position: absolute;

                top: 50%;

                left: 50%;

                transform: translateX(-50%) translateY(-50%);

               
             /* 或者这样写 */

                right: 50%;

                bottom: 50%;

                transform: translateX(50%) translateY(50%);

            }

        </style>

    </head>

    <body>

            <div id="box"></div>

    </body>

</html>

方法二：Flexbox 对齐元素内容

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>上下左右居中对齐</title>

        <style type="text/css">

            #box {

                width: 100px;

                height: 100px;

                border: 2px solid #0000FF;

            }

            body {

                min-height: 100vh;

                display: flex;

                justify-content: center;

                align-items: center;

            }

        </style>

    </head>

    <body>

            <div id="box"></div>

    </body>

</html>

方法三：Display : Table 对齐元素内容

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>上下左右居中对齐</title>

        <style type="text/css">

            #box {

                width: 100px;

                height: 100px;

                border: 2px solid #0000FF;

                display: inline-block;

            }

            body {

                display: table;

                width: 100%;

                min-height: 100vh;

                margin: 0;

            }

            .cell {

                display: table-cell;

                vertical-align: middle;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div class="cell">

            <div id="box"></div>

        </div>

    </body>

</html>

CSS上下左右居中对齐的更多相关文章

  1. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  2. 利用CSS实现居中对齐

    1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...

  3. CSS上下左右居中的几种方法

    1.absolute,margin: auto .container { position: relative; } .content { position: absolute; margin: au ...

  4. css上下左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS居中对齐

    CSS实现居中对齐的几种方式 页面布局中,居中对齐是我们经常遇到的场景,现在总结几个常用的方式供大家参考. 场景一:按钮文字居中对齐,line-height + text-align html代码: ...

  6. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  7. css布局之块上下左右居中

    以下方案的通用代码: HTML code: <div class="box"> <div class="content"> <!- ...

  8. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  9. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

随机推荐

  1. VS2017+QT5.12.10+QGIS3.16环境搭建及开发全流程

    题记:大力发展生产力,助力高效采集.(转载请注明出处https://www.cnblogs.com/1024bytes/p/15477374.html) 本篇随笔分为五个部分: 一.获取QGIS3.1 ...

  2. Qt信号与槽传递自定义数据类型——两种解决方法

    信号与槽作为qt中的核心机制,在qt应用开发中经常会用的,但是原生的信号与槽连接传参,只支持基本的数据类型,比如char,int, float,double. 如果想要在信号与槽之间传递自定义参数,比 ...

  3. (转载)关于Linux C函数strtok的使用要点

    今天遇到了处理字符串的问题,比如分割问题,但是一时间想不起来什么方法,也不想手写一个类似java String中的split函数,于是百度了一下,发现了strtok这个好用的方法,以此作为总结. st ...

  4. WSL2学习和使用汇集

    接触WSL2过程中整理沉淀的一些知识点,大纲如下,内容比较多,详细内容参考https://www.yuque.com/wushifengcn/kb/mbg1b5 欢迎感兴趣者补充和提出问题,共同学习. ...

  5. MarkDown学习内容总结

    MarkDown学习内容 标题 使用方法:通过 # 的个数实现多级标题. 举例如下: 一级标题格式为:# + 空格 + 标题名: 二级标题格式为:## + 空格 + 标题名: 三级标题格式为:### ...

  6. Java踩坑之List的removeAll方法

    最近在公司写东西,发现List的removeAll方法报错 Demo代码如下: List<Long> ids1 = Arrays.asList(1L, 3L, 2L); List<L ...

  7. 设计模式学习-使用go实现适配器模式

    适配器模式 定义 代码实现 优点 缺点 适用范围 代理.桥接.装饰器.适配器4种设计模式的区别 参考 适配器模式 定义 适配器模式的英文翻译是Adapter Design Pattern.顾名思义,这 ...

  8. Swift-技巧（五）设置圆角的代码

    摘要 实现控件圆角的代码时,会不假思索的写 cornerRadius 和 masksToBounds,因为搜索得到的设置圆角的代码就是这样.今天突发奇想,为什么要写 masksToBounds? 打个 ...

  9. Python-Unittest多线程执行用例

    前言 假设执行一条脚本(.py)用例一分钟,那么100个脚本需要100分钟,当你的用例达到一千条时需要1000分钟,也就是16个多小时... 那么如何并行运行多个.py的脚本,节省时间呢?这就用到多线 ...

  10. 虚拟化中虚拟机处理器核数与物理主机cpu的关系

    vCPU,顾名思义,是虚拟CPU. 创建虚拟机时,需要配置vCPU资源. 因此vCPU是虚拟机的部件. 因此脱离VM,谈论vCPU是没有意义的.虚拟化管理系统如何调度vCPU,取决于系统内的虚拟机数目 ...