上下左右居中对齐

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. 算法：杨辉三角（Pascal's Triangle）

    一.杨辉三角介绍 杨辉三角形,又称帕斯卡三角形.贾宪三角形.海亚姆三角形.巴斯卡三角形,是二项式系数的一种写法,形似三角形,在中国首现于南宋杨辉的<详解九章算法>得名,书中杨辉说明是引自贾 ...

  2. PDF转图片部分公式字符丢失问题解决的爬坑记录

    现象 PDF教材导出到系统中,由程序将PDF转为图片后合并成一张大图供前端标注,但是在标注数学和化学学科的时候且源文件是PDF的情况下出现公式部分字符丢失的情况,如下图 原件 转换后效果 WTF! 转 ...

  3. AtCoder Beginner Contest 215 F题题解

    F - Dist Max 2 什么时候我才能突破\(F\)题的大关... 算了,不说了,看题. 简化题意:给定\(n\)个点的坐标,定义没两个点的距离为\(min(|x_i-x_j|,|y_i-y_j ...

  4. JAVA笔记 **__Netbeans常用快捷键

    sout + Tab      生成输出语句 alt+shift+F 格式化代码 Alt+insert  插入代码(包括构造函数,setter和getter方法等) Ctrl+O或Ctrlt+单击 转 ...

  5. 2万字|30张图带你领略glibc内存管理精髓(因为OOM导致了上千万损失)

    前言 大家好,我是雨乐. 5年前,在上家公司的时候,因为进程OOM造成了上千万的损失,当时用了一个月的时间来分析glibc源码,最终将问题彻底解决. 最近在逛知乎的时候,发现不少人有对malloc/f ...

  6. 用tsc编译ts文件的时候报错，tsc : 无法加载文件，因为在此系统上禁止运行脚本；

    用tsc编译ts文件的时候报错,tsc : 无法加载文件,因为在此系统上禁止运行脚本:SecurityError 在vscode的控制台或者Windows PowerShell中用tsc命令编译ts文 ...

  7. 五（二）、spring 声明式事务xml配置

    概述: 接着上一节内容,把注解配置@@Transactional形式改为xml配置形式: 一.配置步骤 1.配置事务管理器 1 <!-- 1配置事务管理器 --> 2 <bean i ...

  8. kubernetes创建用户

    创建k8s User Account 使用openssl方法创建普通用户 准备工作 1 2 3 4 mkdir /root/pki/ 将k8s ca.pem  ca-key.pem 证书拷贝到此目录 ...

  9. Obsidian中如何记录自己的灵感？

    在生活中当中你是否会在某个瞬间产生一个想法,但没过多久就想不起来了,正所谓灵感转瞬即逝,那我们不妨在灵感出现的时候顺手将他记录下来.记录的过程要求简单.方便且不会花费我们太多时间,下面我们介绍一下如何 ...

  10. C#中OnLoad事件和Form1_Load事件的区别

    在学习<GDI+高级编程>第二章的过程中遇到一个疑问,就是为何有的代码用的是覆写一个OnLoad事件,而平日里我用的一般是Form1_Load事件,这两个函数很相近,但是具体有什么关系呢? ...