上下左右居中对齐

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. CSP2020-儒略历

    大家可以在洛谷提交: 题目描述 为了简便计算,天文学家们使用儒略日(Julian day)来表达时间.所谓儒略日,其定义为从公元前 4713 年 1 月 1 日正午 12 点到此后某一时刻间所经过的天 ...

  2. Spark面试题（四）

    1.Spark中的HashShufle的有哪些不足? 1)shuffle产生海量的小文件在磁盘上,此时会产生大量耗时的.低效的IO操作: 2)容易导致内存不够用,由于内存需要保存海量的文件操作句柄和临 ...

  3. GitHub上 README 增加图片标签

    hey Guys~ 你可能遇到的GitHub上好的项目都有一个非常棒的README,其中不乏用到一些非常好看的标签.比如下面这样: walle fastjson 那我们怎样自己添加一个高大上图片标签呢 ...

  4. APP自动化之Hybrid自动化解决方案(七)

    基于UIAutomator+ChromeDriver模式(UIAutomator安卓原生引擎) 原理:native(原生)部分使用UIAutomator,webview部分使用ChromeDriver ...

  5. MyScript 开发文档

    一.IInk SDK runtime 1.1 引擎创建 1.2 对象释放 1.3 获取并设置配置 配置 访问配置 配置识别 二.文件存储 2.1 支持的内容的类型 2.2 模型结构 2.3 Conte ...

  6. 概述C# virtual修饰符

    摘要:C#是继C++和Java语言后的又一面向对象的语言,在语法结构,C#有很多地方和C++及Java相似,但是又不同于它们,其中一些关键特别需要引起我们的注意. C# virtual修饰符用于修改方 ...

  7. 如何修改visual-studio的sln文件和project工程名

    关于VS的 .sln 文件和 .suo 文件 *.sln:(Visual Studio.Solution) 通过为环境提供对项目.项目项和解决方案项在磁盘上位置的引用,可将它们组织到解决方案中.比如是 ...

  8. Python基础（作用域）

    def _private_1(name): return 'Hello, %s' % name def _private_2(name): return 'Hi, %s' % name def gre ...

  9. 菜鸡的Java笔记第二 - java 数据类型

    1.程序的本质实际上就是在于数据的处理上. JAVA中的数据类型有两类 基本数据类型:是进行内容的操作而不是内存的操作 数值型: 整型:byte(-128 ~ 127),short(-32768 ~ ...

  10. Spring AOP及事务配置三种模式详解

    Spring AOP简述 Spring AOP的设计思想,就是通过动态代理,在运行期对需要使用的业务逻辑方法进行增强. 使用场景如:日志打印.权限.事务控制等. 默认情况下,Spring会根据被代理的 ...