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

效果图如下：

方法一：利用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. FCC 成都社区·前端周刊 第 7 期

    01. ES2016, 2017, 2018 中的新特性 文章介绍了 18 个 ECMAScript 2016,2017 和 2018 中新增加的特性,这些特性已被加入到 TC39 提案中.包括Arr ...

  2. seo搜索优化技巧02-seo问答推广怎么做?

    问答推广就是以用户的​‌‌角度去提问,这些问题内容就是用户搜索想要知道的.简单来说通过第三方平台站在用户的角度去帮助客户解答问题,同时附带自身的品牌和产品信息就是问答推广. 常见的问答平台有百度知道. ...

  3. 01 ORM框架概述

    ORM概述 ORM(Object-Relational Mapping) 表示对象关系映射.在面向对象的软件开发中,通过ORM,就可以把对象映射到关系型数据库中.只要有一套程序能够做到建立对象与数据库 ...

  4. GCC 特性整理

    1, attrib 属性 1.1 对齐指令 2,结构体名称 3,switch case 必需{} 否则会报错 a label can only be part of a statement and a ...

  5. C++ 结构体sturct练习

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> struct Student { ];// 姓名 int id; //id int a ...

  6. （转）伪指令LTORG和LTONG浅析

    原文地址:http://zqwt.012.blog.163.com/blog/static/1204468420103196564/ 定义和作用 LTORG或LTONG用于声明一个数据缓冲池(也称为文 ...

  7. 【Weiss】【第04章】AVL树例程

    普通的二叉搜索树可能会由于数据不平均.删除产生高度差等原因,使树倾向于不平衡生长,导致操作慢于O(NlogN). 为应对此现象,将搜索.删除.插入的最坏时间也控制在O(NlogN)上,产生了平衡二叉树 ...

  8. Python下载各种功能包出问题

    问题详情 点击之后出现 AttributeError: module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 解决方法 c ...

  9. Git在公司内部的使用规范

    Git在公司内部的使用规范 目录 Git在公司内部的使用规范 1.版本定义 2.系统开发环境 3. 分支定义 4.Commit 日志规范 5.开发工作流程: 5.1.常规分支debug流程: 5.2. ...

  10. 【转】Kerberos简介

    Kerberos协议: Kerberos协议主要用于计算机网络的身份鉴别(Authentication), 其特点是用户只需输入一次身份验证信息就可以凭借此验证获得的票据(ticket-grantin ...