水平居中
一个div想要水平居中于它的父div中只需要给它加css属性margin:0 auto; 即可

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style>

#box{

    width: 200px;

    height: 200px;

    border:2px solid #000;

    line-height: 200px;

}

#one{

    background: #000;

    width:50px;

    height: 50px;

    margin:0 auto;

}

</style>

<body>

    <div id="box">

          <div id="one"></div>

    </div>

</body>

</html>

垂直居中
一个div想要垂直居中于它的父div中，需要给它添加css属性display: inline-block;再给它的父div添加css属性vertical-align: middle;即可

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style>

#box{

    width: 200px;

    height: 200px;

    border:2px solid #000;

    line-height: 200px;

    vertical-align: middle;

}

#one{

    background: #000;

    width:50px;

    height: 50px;

    display: inline-block;

}

#two{

    background: green;

    width:50px;

    height: 50px;

    display: inline-block;

}    

</style>

<body>

    <div id="box">

          <div id="one"></div>

          <div id="two"></div>

    </div>

</body>

</html>

原文网页链接：https://blog.csdn.net/weixin_44535476/article/details/103455164

div块水平居中，垂直居中的更多相关文章

  1. HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...

  2. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

  3. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  4. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  5. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  6. HTML/CSS：div居中和div内部元素垂直居中（1）

    div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...

  7. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  8. css 水平居中垂直居中的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

随机推荐

  1. 2018HDU多校训练-3-Problem G. Interstellar Travel

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=6325                                   Interstellar Tra ...

  2. Mybatis代码生成器Mybatis-Generator使用详解

    前提 最近在做创业项目的时候因为有比较多的新需求,需要频繁基于DDL生成Mybatis适合的实体.Mapper接口和映射文件.其中,代码生成器是MyBatis Generator(MBG),用到了My ...

  3. Python3 并发编程小练习

    实现基于TCP协议套接字,服务端实现接收客户端的连接并发 # server.py import socket from threading import Thread server = socket. ...

  4. 【JS】370- 总结异步编程的六种方式

    点击上方"前端自习课"关注,学习起来~ 作者:Aima https://segmentfault.com/a/1190000019188824 众所周知 JavaScript 是  ...

  5. 如何解决两个span标签之间的缝隙

    1.span直接一行 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  6. 《Java基础知识》Java接口和抽象类的区别

    抽象类 抽象类必须用 abstract 修饰,子类必须实现抽象类中的抽象方法,如果有未实现的,那么子类也必须用 abstract 修饰.抽象类默认的权限修饰符为 public,可以定义为 public ...

  7. Python高级应用程序设计任务

    Python高级应用程序设计任务要求 用Python实现一个面向主题的网络爬虫程序,并完成以下内容:(注:每人一题,主题内容自选,所有设计内容与源代码需提交到博客园平台) 一.主题式网络爬虫设计方案( ...

  8. C语言笔记 08_函数指针&回调函数&字符串&结构体&位域

    函数指针 函数指针是指向函数的指针变量. 通常我们说的指针变量是指向一个整型.字符型或数组等变量,而函数指针是指向函数. 函数指针可以像一般函数一样,用于调用函数.传递参数. 函数指针变量的声明: / ...

  9. Jupyter 快捷键总结

    转载自https://www.cnblogs.com/hello-alan/p/11376325.htmlJupyter Notebook 有两种键盘输入模式.编辑模式,允许你往单元中键入代码或文本: ...

  10. 百度大脑IOCR财会票据识别技术接入小程序，快速实现财会票据识别

    本文主要介绍iOCR财会票据识别的小程序功能实现. 想了解微信小程序的开发过程,请参看我之前的帖子:<UNIT接入小程序>https://ai.baidu.com/forum/topic/ ...