水平居中
一个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. 2019 AI Bootcamp Guangzhou 参会日记

    2019年的全球AI训练营在北京.上海.广州.杭州.宁波五个地方同时举办! 12月14日,微软全球AI Bootcamp活动再次驾临广州,本次会议结合 ML.NET 和基于 SciSharp 社区介绍 ...

  2. windows程序设计01_utf8编码问题

    坚持与妥协 从学程序的第一天老师就给我们说源代码应该使用utf8保存.因为先入为主,"源代码应该使用utf8"的观念已经在"学院派"出身的程序员脑子里根深蒂固. ...

  3. 【VMware】The VMX process exited permaturely

    问题现象: 开启虚拟机时出现如图问题:虚拟机退出过早 解决方法: 以管理员身份运行cmd,输入netsh winsock reset ,回车然后重启

  4. kubernetes-集群构建

    本实验参考:https://github.com/gjmzj/kubeasz kubernetes官方github地址 https://github.com/kubernetes/kubernetes ...

  5. Power Platform之Power Automate新增RPA功能

    ​ 什么是RPA RPA( Robotic Process Automation 机器人流程自动化软件),是一种新型的人工智能的虚拟流程自动化机器人.RPA的核心是通过自动化.智能化技术来“替代人”进 ...

  6. webpack学习_使用source map

    追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确 ...

  7. 《Java基础知识》Java抽象类，接口的概念和使用

    1.抽象类 在自上而下的继承层次结构中,位于上层的类更具有通用性,甚至可能更加抽象.从某种角度看,祖先类更加通用,它只包含一些最基本的成员,人们只将它作为派生其他类的基类,而不会用来创建对象.甚至,你 ...

  8. 《Dotnet9》系列-开源C# WPF控件库2《Panuon.UI.Silver》强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  9. C#获取字符串的拼音和首字母

    在C#中我们想要获取字符串的拼音并不是那么困难的,在网上看到很多都是特别笨的方式来实现,其实各有各的好处吧,如果使用了下方法方式,它不知道多音字,这就是一个问题. /// <summary> ...

  10. WPF引用WinForm控件

    前言:在WPF开发当中由于DataGrid控件实现业务未达到非常理想的效果,我决定使用WinForm中的DataGridView来实现业务. 在XAML中加入以下命名空间: xmlns:wf=&quo ...