实现元素或图片的上下、左右居中的三种方法

效果图如下：

方法一：利用vertical-align属性实现图片上下居中

先设置父元素样式text-align: center，实现图片左右居中，给图片添加一个同级的span标签，设置宽度为零，高度100%，两者都设置display: inline-block; vertical-align: middle，即可实现图片上下居中，具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片上下左右居中</title>

    <style>

.box{

width: 400px;

height: 300px;

border: 1px #000 solid;

margin: 40px auto;

text-align: center;

}

.box img{

display: inline-block;

vertical-align: middle;

}

.box span{

width: 0;

height: 100%;

display: inline-block;

vertical-align: middle;

}

</style>

</head>

<body>

   　　<div class="box"></div>

<span></span>

</div>

</body>

</html>

方法二：使用弹性盒实现，这种方法比上一种方法好操作

只需要给父元素添加display:flex（弹性盒），再给子元素设置margin: auto即可，具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片上下左右居中</title>

    <style>

.box{

width: 400px;

height: 300px;

border: 1px #000 solid;

margin: 40px auto;

display: flex;

}

.box img{

margin: auto;

}

</style>

</head>

<body>

　　<div class="box"></div>

</body>

</html>

方法三：使用定位使子元素在父元素内部垂直水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素上下左右居中</title>
    <style>
        .box{
            width: 400px;
            height: 300px;
            border: 1px #000 solid;
            margin: 40px auto;
            background-color: lightskyblue;
            position: relative;
        }
        .box p{            
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 0;right: 0;
            top: 0;bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class=""></p>
     </div>
</body>
</html>

如果感觉对自己有帮助，麻烦点一下关注，会一直和大家分享知识的，谢谢！！！

html+css实现图片或元素的垂直、水平同时居中的多种方法的更多相关文章

  1. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  2. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  3. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

  4. CSS垂直水平完全居中手册

    水平居中 内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } 块级元素(blo ...

  5. 实现CSS样式垂直水平完全居中

    1.水平居中 a.内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } b.块级 ...

  6. CSS 布局实例系列（一）总结CSS居中的多种方法

    使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...

  7. 图片与文字在div里实现垂直水平都居中

    第一种方法,利用盒布局实现   <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...

  8. 纯css使div垂直居中，div垂直，div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  9. css未知宽高的盒子div居中的多种方法

    不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...

随机推荐

  1. jinja2的url_for 和数据块

    1.静态文件引入:{{ url_for('static', filename='文件路径') }}   2.定义路由:{{ url_for('模块名.视图名',变量=参数) }}   3.定义数据块: ...

  2. iview2+ 表单密码验证

    <Form :model="formItem" v-model="formItem.id" ref="formItem" :label ...

  3. R自带数据集

    向量 euro    #欧元汇率,长度为11,每个元素都有命名landmasses    #48个陆地的面积,每个都有命名precip   #长度为70的命名向量rivers   #北美141条河流长 ...

  4. CSRF攻击原理及预防手段

      CSRF全程 Cross Site Request Forgery, 跨站域请求伪造.这种攻击方式相对于XSS,SQL注入等攻击方式比较晚被发现,今天就来讲解下这种攻击方式以及避免方式. 攻击过程 ...

  5. css3特性简要概括

    ---恢复内容开始--- css3新增核心知识 背景和边框 文本效果 2d/3d转换 过渡和动画 多列布局 弹性盒模型 媒体查询 增强选择器 css3浏览器兼容性 css3在线工具 css3gener ...

  6. 3分钟入门lambda表达式

    本节是lambda表达式的一个入门课,讲解的同时配有练习demo 前言什么是lambda表达式?基础语法函数式接口自己实现一个函数式接口jdk提供的函数式接口Consumersupplierfunct ...

  7. django 和 七牛云 交互

    django 和 七牛云 交互 七牛开发文档 安装 pip install qiniu 初始化 # access_key 个人中心的 ak # secret_key 个人中心的 sk from qin ...

  8. 启动崩盘！IDEA 2020 无法启动的解决办法|赠送 IDEA 2020 新功能

    今天早上看到 IDEA 可以升级新版本,想着体验一下新功能,点击升级,然后全部项目工程无法打开. 报错信息如下: Cannot execute command No project found to ...

  9. JavaScript(7)--- 继承

    JavaScript(7)--- 继承 概念 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承,继承也是为了数据共享. 之间有讲过j ...

  10. 1. postman使用

    postman使用教程: https://blog.csdn.net/fxbin123/article/details/80428216 http://bayescafe.com/tools/use- ...