上下左右居中对齐

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. openmp学习心得（二）----常见的运行时库函数

    omp_set_dynamic();如果设置了动态调整,并行区域会根据系统的资源状况,动态分配线程的数量.好像仅仅有0和非0的区别,设置为0不进行动态分配. omp_get_num_threads,o ...

  2. Matlab+Qt开发笔记（一）：matlab搭建Qt开发matlib环境以及Demo测试

    前言   做一些数据处理软件,使用matlab文件,.mat文件.   准备条件   安装matlab2016,发现是vs 12(是vs2011版本),Qt5.9.3是支持vs 14(是vs2015版 ...

  3. linux基本命令二

    组管理与权限管理  文件/目录所有者  修改文件所有者 chown 用户名 文件名 创建文件所在组  groupadd 修改文件所在组 chgrp  组名  文件名 其他组:除文件的所有者和所在组的用 ...

  4. Mysql 5.7 集群部署，keepalived

    参考文章: https://blog.csdn.net/f18770366447/article/details/80703347 https://www.cnblogs.com/benjamin77 ...

  5. K8s 离线集群部署（二进制包无dashboard）

    https://www.cnblogs.com/cocowool/p/install_k8s_offline.html https://www.jianshu.com/p/073577bdec98 h ...

  6. ffmpeg第7篇：数据流选择神器-map指令

    自动选择规则 ffmpeg在处理视频时,如果只提供了输入和输出参数,ffmpeg会自动地去选择相应的视频流和音频流来合成文件 自动选择的方式根据如下规则: 视频流:选分辨率最高的,比如有两个视频,一个 ...

  7. 剖析虚幻渲染体系（12）- 移动端专题Part 1（UE移动端渲染分析）

    目录 12.1 本篇概述 12.1.1 移动设备的特点 12.2 UE移动端渲染特性 12.2.1 Feature Level 12.2.2 Deferred Shading 12.2.3 Groun ...

  8. Cain工具的使用

    这次是用windows xp当肉鸡,用Windows2003进行监听 这是一个基于ARP协议的漏洞的攻击 先要确认两个虚拟机之间能够互相ping通和都能正常访问网页 首先安装好Cain后,张这个样子: ...

  9. $router 和 $route的区别

    router router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局对象,他包含了所有的路 ...

  10. Mysql - 整数类型的存储字节数和范围

    MySQL 整数类型的存储字节数和范围 type 存储字节数 有符号最小值 无符号最小值 有符号最大值 无符号最大值 TINYINT 1 -128 0 127 255 SMALLINT 2 -3276 ...