水平居中
一个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. UESTC-1963咸鱼咕咕咕(二分图匹配)

    咸鱼咕咕咕 Time Limit: 1000 MS     Memory Limit: 64 MB Submit Status 咸鱼有个咕咕笼. 咕咕笼可以划分成m×nm×n个格子,每个小格子可以放下 ...

  2. B.Beautiful Numbers

    题意:你被给予了一个序列 p = [p1, p2, ..., pn](1 ~ n的整数),如果存在l, r左右端点(1 <= l <= r <= n),使得[pl, pl+1,... ...

  3. 强化学习环境OpenAi搭建，从虚拟机到Gym、Mujoco和mujoco-py的完整安装

    平时不怎么写博客,这次是因为环境的配置花费了我大概一个星期的时间.所以简单的记录一下搭建的整个过程,其中有些部分我直接推荐别人的博客的基本教程,都是我亲自尝试过成功的.同时,也希望这篇博客可以帮到您. ...

  4. 【CentOS7】设置静态IP地址

    [CentOS7]设置静态IP地址 转载:https://www.cnblogs.com/yangchongxing/p/10645871.html 图像化修改 nmtui 查看当前网卡名称 # if ...

  5. vivado三人表决仿真

    概述 下面以三人表决电路的verilog仿真来了解一下vivado软件的使用. 编写设计文件 首先可以在开始的界面通过create new project来新建工程,也可以通过file-->pr ...

  6. sql语句对int类型进行模糊查询

    重点:select * from course where cast(courseId as char) like '%118%'; 首先可以将int类型转换为string类型的值再进行模糊查询,用方 ...

  7. Vue使用Viser

    最近产品经理发现antV的图表非常漂亮,想在项目里使用,看了下文档antV适用于Vue的分支叫Viser,Viser的官方文档写的有点随意,在此给出Vue中使用Viser的方法如下: 1.安装Vise ...

  8. Common Lisp学习资源整理

    Lisp Hackers: Interviews with 100x More Productive Programmers Posted on June 26th, 2013 Lisp Hacker ...

  9. Redis有哪几种数据类型

    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). String(字符串) string 是 redi ...

  10. [ASP.NET Core 3框架揭秘] 跨平台开发体验: Windows [下篇]

    由于ASP.NET Core框架在本质上就是由服务器和中间件构建的消息处理管道,所以在它上面构建的应用开发框架都是建立在某种类型的中间件上,整个ASP.NET Core MVC开发框架就是建立在用来实 ...