上下左右居中对齐

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. NB-IoT的DRX、eDRX、PSM三个模式怎么用？通俗解释，看完就懂！

    面我们讲了不少NB-IOT的应用.软件和硬件设计的变动. (链接在文章末尾). 今天讲讲NB-IoT的三大模式,在各种物联网和智能硬件场景中的使用方法 DRX.eDRx.PSM是什么? DRX虽然叫做 ...

  2. python画图的工具及网站

    ①Gallery - Matplotlib 3.4.3 documentation 学会模仿并超越 ②Examples - Apache ECharts js网页端动态展示 ③WEB色見本 原色大辞典 ...

  3. 『学了就忘』Linux基础 — 13、Linux系统的分区和格式化

    目录 1.Linux系统的分区 (1)磁盘分区定义 (2)两种分区表形式 (3)MBR分区类型 2.Linux系统的格式化 (1)格式化定义 (2)格式化说明 1.Linux系统的分区 (1)磁盘分区 ...

  4. JAVA笔记1__基本数据类型/输入输出/随机数/数组

    /**八种基本数据类型 boolean byte short int long char float double */ public class test1{ public static void ...

  5. Oracle的主要组件和基本概念

    oracle 简介 oracle(甲骨文)公司 1977年,三人合伙创办(Software Development Laboratories,SDL) 1979年,更名为Relational Soft ...

  6. Qt 信号与槽的自动关联机制

    前言 对于一些简单的事件判别,如点击按钮.无需写代码关联信号和槽函数. connect(ui->Btnshowhello,SIGNAL(clicked(bool)),this,SLOT(Btns ...

  7. Linux下安装、配置、启动与访问RabbitMQ

    一.下载 首先第一步要下载三个rpm安装包,为了方便安装与学习,给出下载途径 网盘网址:https://pan.baidu.com/s/18Z64Lb9KQpRh10RzqZBdoQ 提取码:094v ...

  8. ABAP——系统状态&用户状态修改、查询

    前言:在ABAP开发中有时候会涉及到状态的变更,比如销售订单的系统状态变更未审批->已审批.设备的在运->报废等,在这里就需要用到标准函数I_CHANGE_STATUS.STATUS_CH ...

  9. stom消费kafka消息速度慢的问题

    原来代码如下 KafkaSpoutConfig<String, String> kafkaSpoutConfig = KafkaSpoutConfig.builder(kafka_serv ...

  10. 大一C语言学习笔记（7）---指针篇--什么是指针？什么是指针变量？取地址符“&”的作用是什么？地址运算符“*”的作用是什么，怎么理解两者？

    "指针是C语言的灵魂"这句话一开始我没怎么明白,现在接触了指针,终于知道为什么这么说了,因为....难,真难:下面说一下我对这句话的见解: C语言拥有着其他语言所没有的特性---直 ...