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

效果图如下：

方法一：利用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. JZOJ 1349. 最大公约数 (Standard IO)

    1349. 最大公约数 (Standard IO) Time Limits: 1000 ms Memory Limits: 65536 KB Description 小菜的妹妹小诗就要读小学了!正所谓 ...

  2. Spring Boot从入门到精通（七）集成Redis实现Session共享

    单点登录(SSO)是指在多个应用系统中,登录用户只需要登录验证一次就可以访问所有相互信任的应用系统,Redis Session共享是实现单点登录的一种方式.本文是通过Spring Boot框架集成Re ...

  3. 《一步步成为 Hacker_Day 01》

    环境搭建 传统运行模式 - 一台机器同时只能运行一个操作系统 |:----------|----------:| | 应用程序 | 应用程序 | |:----------|----------:| | ...

  4. git add的各种情况分类

    ·  git add -A  提交所有变化 ·  git add -u  提交被修改(modified)和被删除(deleted)文件,不包括新文件(new) ·  git add .  提交新文件( ...

  5. openwrt 上的 upnp wifi 音频推送 gmediarender

    首先是必须启用的模块 Libraries ---> <*> libupnp Sound ---> <*> alsa-utils<*> madplay-a ...

  6. CouchDB的简单使用

    一.安装CouchDB 到官网下载CouchDB,在windows下安装CouchDB较为简单,略过. 安装完后,确认CouchDB在运行,然后在浏览器访问http://127.0.0.1:5984/ ...

  7. 工具之scroolToIndex

    需求定位:导航中实现子元素滚动到父元素的最左侧 解决方案:查找该子元素的offsetLeft值,然后让父元素滚动offsetLeft,parenDom.scrollLeft = childDom.of ...

  8. npm run build时卡住不动了...

    在build文件夹里有个check-versions.js. if (shell.which('npm')) { versionRequirements.push({ name: 'npm', cur ...

  9. Spark入门（三）--Spark经典的单词统计

    spark经典之单词统计 准备数据 既然要统计单词我们就需要一个包含一定数量的文本,我们这里选择了英文原著<GoneWithTheWind>(<飘>)的文本来做一个数据统计,看 ...

  10. rimraf node_modules 突然不能用了 怀疑是yarn的问题，从环境变量将yarn删掉，能用了

    rimraf node_modules 突然不能用了 怀疑是yarn的问题,从环境变量将yarn删掉,能用了