div居中的三种方式

最新推荐文章于 2023-09-20 13:51:42 发布
最新推荐文章于 2023-09-20 13:51:42 发布
阅读量468 收藏 1
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54096012/article/details/115283679
版权

div居中的三种方式

**1.**弹性布局(display:flex)
注:给需要居中的元素的父元素设置display:flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        border:1px blue solid;
        width: 600px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box>div {
        width: 400px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <div class="box">
        <div>
            123
        </div>
    </div>
</body>
</html>

**2.**绝对定位(position:absolute)
注:给要居中的元素加position:absolute属性,给要居中的元素的父元素加position:relative;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        border: blue solid;
        width: 600px;
        height: 400px;
        position: relative;
    }
    .box>div {
        width: 400px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>
<body>
    <div class="box">
        <div>
            123
        </div>
    </div>
</body>
</html>

**3.**利用margin(外边距)来调整居中
计算需要居中元素在它父元素所剩的height/2就是margin-top的值
居中元素在它父元素所剩的width/2就是margin-left的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        border: blue solid;
        width: 600px;
        height: 400px;
    }
    .box>div {
        width: 400px;
        height: 200px;
        background-color: pink;
        margin: 100px 100px;
    }
</style>

<body>
    <div class="box">
        <div>
            123
        </div>
    </div>
</body>
</html>

上面三种方法都可实现如下所示的效果
在这里插入图片描述

lao-qian
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现DIV居中的三种方法
09-27
本文将详细介绍三种方法来实现`div`的居中对齐，适用于不同场景和需求。 ### 方法一：使用margin自动填充 这种方法适用于当外层`div`（`.div1`）的尺寸已知，并且内层`div`（`.div2`）的尺寸也已知的情况。我们...
div居中div居中的8种方法
04-11
要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取
让div居中的方式的几种方法
恒二哥的博客
11-04 7万+
div垂直居中的几种方式
div居中方法（共8种）
qq_41425194的博客
04-25 11万+
水平居中 1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span> </div> 2.块级元素：为其自身设置margin:auto样式 <div st
（史上最全）div居中的几种方法
weixin_33796205的博客
04-15 2421
使div水平垂直居中1. flex 布局实现 （元素已知宽度）效果图：内部 div 要有宽度CSS 代码: <style> .box{ width: 300px; height: 300px; background-color: #ccc; ...
CSS样式——div居中方法
热门推荐
诗琪芮的博客
10-21 16万+
1、绝对居中 给div设置样式，div默认显示位置为body的左上方。 width: 400px; height: 300px; background-color: orange; 如下图所示： 首先给div添加绝对定位，并设置上下左右边距为0，然后使用margin: auto;自动居中。 position: absolute; top: 0; bottom:
div在div中居中的多种方式演示.html
05-07
提供了div在div中居中的多种方式，直接打开文件F12查看样式即可，简单方便。不再只会使用绝对布局
css三种方法实现div在浏览器水平居中
09-27
主要介绍了css三种实现div在浏览器水平居中的方法，感兴趣的小伙伴们可以参考一下
让一个div居于页面正中间的三种方法
RedTea_的博客
11-07 2万+
1. .div1{ width: 100px; height: 100px; background: #eee; border: 1px solid #ccc; position: absolute; left: 50%;top: 50%; margin-left: -50px; margin-top: -50px; } 这几行在#login_box中的目的是使其在浏览器中水平居中显示。（无论浏览器被如何拉伸，该login_box始终保持居中） 原理（对齐浏览器的中心点与#login_bo
使一个div居中显示的三种方法
weixin_43885123的博客
12-06 4万+
使一个div居中显示的三种方法 1. &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;div居中&lt;/title&gt; &lt;style&gt; /*第一种方法
css之div盒子居中常用方法大全
最新发布
高电平的博客
09-20 3273
只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。这个方法就是利用绝对定位，使它的top、left、right、bottom都为0就可以实现居中。这个方法用在垂直居中都可以，就使它的上下为 0 就可以实现垂直居中。利用负的margin来进行居中，需要知道固定宽高，限制比较大。这种的话就是将父元素转换成表格单元格显示，然后使用垂直居中实现。这种定位方法，得需要知道宽高，不灵活。这种唯一的缺点就是 IE9 以下不支持。
三种让div居中的方式
Mr_pets的博客
09-11 6829
三种让div居中的方式 写在前面：div居中于屏幕中间有很多种方式，这里就记录下 学习的时候的三种方式 毕竟面试题问的多！！ 1.宽度和高度已知的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid...
div实现内部元素居中的三种方式
wwj256的专栏
05-12 1万+
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
css中div三种水平居中方法【最常见】
小菜鸡
07-16 2930
基础样式 <div id="dad"> <div id="son></div> </div> <style> #dad{ width :400px; height；200px； border：3px solid green; margin:30px auto; } #son{ width:100pcx; height:100px; background:purple; } </style> 第一种：子元素使用margin属
DIV居中的经典方法
Napster的专栏
07-05 1万+
参考：https://www.cnblogs.com/rubykakas/articles/7992662.html 1. 实现DIV水平居中 设置DIV的宽高，使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 div{ width: 100px; height: 100px; margin: 0 auto; } 缺点：需要设置div的宽度 2. 实现DIV水平、垂直居中 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对
如何让div实现居中效果
心如止水
08-25 1万+
方法一：常见的居中方法，定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*常见的居中:定位方法*/ .father{ widt...
div居中显示三种方式
04-11
可以使用以下三种方式使div居中显示： 1. 使用CSS的margin属性将div的左右margin设置为auto，同时将宽度设定为一个固定值，例如： div { width: 200px; margin: 0 auto; } 2. 使用绝对定位将div置于父元素的中心...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值