水平居中
一个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. Ceph 块存储

    任何普通的linux主机都可以充当ceph客户机,客户机通过网络与ceph存储集群交互以存储或检索用户数据.Ceph RBD支持已经添加到linux主线内核中,从2.6.34以及以后版本开始. === ...

  2. Python的面试题

    (1)怎么把一个字符串转换成整型? 可以使用int函数  如 int('3')   结果由字符串'3'变为整型3 (2)python内建数据类型有哪些? int .bool. str.list. ru ...

  3. Python利用PyExecJS库执行JS函数

      在Web渗透流程的暴力登录场景和爬虫抓取场景中,经常会遇到一些登录表单用DES之类的加密方式来加密参数,也就是说,你不搞定这些前端加密,你的编写的脚本是不可能Login成功的.针对这个问题,现在有 ...

  4. 函数中this的指向

    每个函数在被调用时都会自动取得两个特殊变量:this和arguments:内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量. f 1 var name ...

  5. 使用Power BI API 向流数据集推送实时数据并在仪表板可视化

    使用Power BI 实现实时数据的可视化是大家比较关心的一个话题,在仪表盘上实现推送数据的展示,可以在诸如指挥大屏等场景下使用. 本视频实战内容如下: https://v.qq.com/x/page ...

  6. vue父组件传值给子组件

    一.父传子 方式一 父传子主要通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收 父组件 <template> <div id="container ...

  7. 控制DIV移动

    键盘控制DIV移动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. docker 使用mysqldump命令备份导出项目中的mysql数据

    下图为镜像重命名后的镜像名为uoj,现在要把这个镜像中的mysql导出 运行如下命令: docker exec -it uoj mysqldump -uroot -proot app_uoj233 & ...

  9. Bash脚本编程之脚本基础和bash配置文件

    脚本基础 参考资料:Shell Scripts (Bash Reference Manual) 不严谨地说,编程语言根据代码运行的方式,可以分为两种方式: 编译运行:需要先将人类可识别的代码文件编译成 ...

  10. linux 动态链接库查找方法；查找动态链接库位置; LIBRARY_PATH 和 LD_LIBRARY_PATH 的区别；LD_LIBRARY_PATH and LD_RUN_PATH的区别；

    今天配置之前项目的时候,发现有些动态链接库变了,想看看现在应用在使用哪些动态链接库的时候,进一步查了点资料: 下面针对linux动态链接库查找方法和动态链接库位置配置的过程进行记录: LIBRARY_ ...