如何让盒子水平居中

已于 2022-11-29 19:42:19 修改
阅读量178 收藏
点赞数 2
文章标签： html 前端 css3
于 2022-11-29 19:41:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjp991028/article/details/128103947
版权

方法一:利用定位(常用方法,推荐使用)

<!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>Document</title>

    <style>

        .parent {

            width: 500px;

            height: 500px;

            border: 1px solid #000;

            position: relative;

        }

        .child {

            width: 100px;

            height: 100px;

            border: 1px solid #999;

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -50px;

            margin-left: -50px;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child">我是子元素</div>

    </div>

</body>

</html>

方法二:利用margin:auto

<!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>Document</title>

    <style>

        .parent {

            width: 500px;

            height: 500px;

            border: 1px solid #000;

            position: relative;

        }

        .child {

            width: 100px;

            height: 100px;

            border: 1px solid #999;

            position: absolute;

            margin: auto;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child">我是子元素</div>

    </div>

</body>

</html>

利用display:table-cell

<!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>Document</title>

    <style>

        .parent {

            width: 500px;

            height: 500px;

            border: 1px solid #000;

            display: table-cell;

            vertical-align: middle;

            text-align: center;

        }

        .child {

            width: 100px;

            height: 100px;

            border: 1px solid #999;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child">我是子元素</div>

    </div>

</body>

</html>

方法四:利用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>Document</title>

    <style>

        .parent {

            width: 500px;

            height: 500px;

            border: 1px solid #000;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .child {

            width: 100px;

            height: 100px;

            border: 1px solid #999;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child">我是子元素</div>

    </div>

</body>

</html>

方法五: 计算父盒子与子盒子的空间距离(和方法一是一个道理)

<!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>Document</title>

    <style>

        .parent {

            width: 500px;

            height: 500px;

            border: 1px solid #000;

        }

        .child {

            width: 100px;

            height: 100px;

            border: 1px solid #999;

            margin-top: 200px;

            margin-left: 200px;

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child">我是子元素</div>

    </div>

</body>

</html>

方法六: 利用transform

<!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>Document</title>

    <style>

        .parent {

            width: 500px;

            height: 500px;

            border: 1px solid #000;

            position: relative;

        }

        .child {

            width: 100px;

            height: 100px;

            border: 1px solid #999;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%)

        }

    </style>

</head>

<body>

    <div class="parent">

        <div class="child">我是子元素</div>

    </div>

</body>

</html>

快乐朋
关注
html-定位实现盒子的水平绝对居中的3种方式--小技巧
JackieDYH的博客
02-19 5210
方法一：margin负间距 必须知道居中盒的宽度和高度； 为居中盒设置绝对定位； 距离定位父级左边框和上边框的距离设置为50%； 将元素分别左移和上移，移动元素宽度和高度的一半 方法二：margin: auto；实现绝对定位元素的居中 必须知道居中盒的宽度和高度； 为居中盒设置绝对定位； 分别设置left: 0; right: 0; top: 0; bottom: 0; 为居中盒设置ma...
CSS-让盒子水平垂直居中的几种方式
zgq1259805541的博客
05-05 1365
<div class="box"> <div class="small">small</div> </div> .box { width: 300px; height: 300px; background: #ddd; } .small { width: 100px; height: 100px; background: skyblue.
一个盒子垂直水平居中的几种方法
qq_43692768的博客
11-01 1833
一个盒子垂直水平居中的几种方法总结 效果展示： HTML代码： <div id="container"> <div id="box"></div> </div> css基本样式： #container { width: 100%; height: 600px; border: 1px solid black; } #box { width: 100px; height: 100px;
如何使一个盒子水平垂直居中
Li_Arena的博客
08-05 160
方法一:利用定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .parent { width: 500px; height:
让盒子垂直水平居中的五种方法
最新发布
xiwmwmwm的博客
01-04 823
先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用位移transform: translate;先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用外边距margin将子盒子分别向左、向上移动子盒子的一半。先为父盒子设置相对定位，再为子盒子设置绝对定位，且绝对定位的四个方向的位移都设为0，然后将外边距margin属性值设置为auto即可。使其显示模式为flex布局模式，然后在父元素中添加主轴居中和侧轴居中即可。
如何用插件让盒子垂直水平居中
weixin_42161401的博客
09-07 163
《js代码插件例子》 ;(function($){     //对象级别     $.fn.center = function(options){         var defaults = {             "position":"absolute",             "background":"red",             "width":100,         ...
实现盒子水平居中/垂直居中的方法
从入门到放弃_nys的博客
10-03 1697
盒子垂直居中/水平居中的方法）一、盒子水平居中1.margin: 0 auto;2.使用margin计算盒子左右边距3.定位实现4.盒子转为行内块元素，然后使用text-align属性二、盒子垂直居中1.定位实现2.使用表格的vertical-align: middle实现（借助display:table-cell）3.使用margin计算盒子上下边距 一、盒子水平居中 1.margin: 0 a...
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
11-24
CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...
[css]盒子水平垂直居中的6种方法
热门推荐
belloc_li的博客
02-17 1万+
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。 盒子的设定 父盒子：width: 400px; height: 500px; 子盒子：width: 100px; height: 100px; （当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定） 预期结果 方法 1.定位法 利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位 代码如下： <!DOCTYPE html> <html lang="en
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
html一个整体垂直居中,让一个盒子水平垂直居中
weixin_29903713的博客
05-30 473
css3 怎么让元素在一个盒子里面 水平垂直居中怎么让一个不定宽高的div水平居中，垂直水平居中欢迎来到CSS布局HTML， 你想将盒子居中， 最好是将宽高都写上，就算宽高不固定，也可以写个百分数。但至少要有值，不然居中是没法的。 居中可以通过 margin 或者 定位 或者 弹性盒模型 来进行居中。如何让一个DIV水平，垂直方向都居中于浏览器？让层垂直居中于浏览器窗口 其实解决的思路是这样的：首...
如何使一个盒子水平垂直居中 六种方法带你解决
Tina_yalan的博客
07-11 1727
如何使一个盒子水平垂直居中
盒子水平居中实现方法
luckypian
06-25 4442
方法一：外边距(margin) 1.必须给盒子设置宽度； 2.盒子设置外边距margin:0 auto。（上下外边距为0） 注:行内元素或行内块元素若想水平居中，给父元素设置text-align:center。 方法二：绝对定位 ①元素水平垂直居中 1. 对该元素设置绝对定位； 2. 设置left:50%; 当前参考物宽度的一半; margin-left: -小盒子宽度的一半； 3. 设置top:50%;当前参考物高度的一半;margin-top:-小盒子高度的一半。 ②元素水平垂直居中 1. 对该元素设置
CSS基础：让一个盒子垂直水平居中的几种方法及原理
祝贺
02-08 1229
CSS基础：让一个盒子垂直水平居中的几种方法方法一：通过position+transform实现方法二：通过display: flex;（弹性盒子）实现 方法一：通过position+transform实现 // 首先准备一个盒子 <div class="box"></div> // 实现效果代码 <style> .box { width: 100px; height: 100px; background-color
盒子水平垂直居中常用的六种方法
Angel_Tears_的博客
08-09 9032
盒子水平垂直居中常用的六种方法,在写前端代码的时候,我们经常用到盒子的水平垂直居中,这里说的水平垂直居中都要有一个参照物,也就是子盒子相对于父盒子的水平垂直居中,方法一:利用定位 父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50% 有时候,要实现一些元素水平垂直都居中,这部分元素呢,可能大小未知,例如一些图片或者一些未知大小的块元素,margin:auto会
css如何通过布局实现盒子水平垂直居中
ruienger的博客
09-04 268
通过布局实现盒子垂直水平居中 大致思想有两种 通过POSITION定位布局实现 通过DISPLAY:FLEX伸缩盒布局实现 Position .father{ height:100px; width:100px; position:relative; } .child{ height:10px; width:10px; position:absolute; left:0;right:0;top:0;bottom:0; margin:auto; } 或者 .father{ height:1
盒子水平垂直居中最实用四种方法
swag_12581的博客
05-20 2640
已知宽高的方法(使用定位) 1.子元素必须绝对定位 2.子元素四个方向的对立方向数值相同（都为0） 3.再给子元素加 margin:auto 可以让子元素在父元素中水平垂直居中 .login { width: 100px; height: 100px; /* 绝对定位 */ position: absolute; /* 四个方向都为0*/ top: 0; right: 0; bottom: 0; right: 0; ..
div盒子水平居中垂直居中的几种方法
QIANG123___的博客
11-21 4978
div盒子水平居中垂直居中的几种方法
css让盒子水平垂直居中
07-29
要让一个盒子水平垂直居中，可以使用以下的CSS方法： 1. 使用Flexbox布局： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. 使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值