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

效果图如下：

方法一：利用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. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  2. Redis(7)——持久化【一文了解】

    一.持久化简介 Redis 的数据 全部存储 在 内存 中,如果 突然宕机,数据就会全部丢失,因此必须有一套机制来保证 Redis 的数据不会因为故障而丢失,这种机制就是 Redis 的 持久化机制, ...

  3. 简说python之安装

    Python是跨平台程序语言,做为世界流行的语言之一,它可以平滑地部署在Windows,Linux,Mac等平台之上,并有很多第三方模块的函数可供使用. 学习Python,首先需要把Python的编译 ...

  4. ggplot2（3） 语法突破

    3.1 简介 图形图层语法基于Wilkinson的图形语法,并在其基础上添加了许多新功能,使得图形更有表现力,并能完美地嵌入到R的环境中. 图形图层语法使得图形的重复更新变得简单——每次只更新一个特征 ...

  5. Robotutor Scratch3.0 在线编程平台上线！

    终于,Scratch3.0在线编程平台上线了,不容易阿! 欢迎试用 https://scratch.robotutor.cn 欢迎交流,WeChat ID: iamlinweidong

  6. js中的堆和栈

    http://www.jscwwd.com/article/5e533ae2552a8e2bf45d3d69 这里先说两个概念:1.堆(heap)2.栈(stack)堆 是堆内存的简称.栈 是栈内存的 ...

  7. mybatis返回自增主键踩坑记

    背景 MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以对配置和原生Map ...

  8. IOptions、IOptionsMonitor以及IOptionsSnapshot

    背景 ASP.NET Core引入了Options模式,使用类来表示相关的设置组.简单的来说,就是用强类型的类来表达配置项,这带来了很多好处.初学者会发现这个框架有3个主要的面向消费者的接口:IOpt ...

  9. jdbc连接数据库三种方式

    ---恢复内容开始--- 第一种: public class Demo1 { //连接数据库的URL private String url = "jdbc:mysql://localhost ...

  10. mvc5+ET6入门第一章

    这一篇主要讲的是MVC也就是Model--View--Controller的缩写,没有讲ET.其中 Model(模型)表示应用程序核心(比如数据库记录列表).通常模型对象在数据库中存取数据. View ...