盒子水平垂直居中的多种实现方式

最新推荐文章于 2024-07-15 15:13:08 发布
最新推荐文章于 2024-07-15 15:13:08 发布
阅读量67 收藏
点赞数 1
文章标签： css html html5 定位 flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47737989/article/details/116953564
版权

盒子水平垂直居中的多种实现方式

先给出公共部分的代码

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="box">
        安徽大学
    </div>
</body>

</html>

以下代码是在原有基础上添加

1.定位加margin
<style>
        body {
            position: relative;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }

        #box {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 50px;
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 50px;

            margin-top: -25px;
            margin-left: -50px;
        }
</style>
3.定位加margin
<style>
        body {
            position: relative;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }

        #box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;

            height: 50px;
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
        }
</style>
3.定位加transform
<style>
        body {
            position: relative;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }

        #box {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 50px;
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 50px;

            transform: translate(-50%, -50%);
        } 
</style>
4.flex布局（推荐）
<style>
       body {
            width: 100vw;
            height: 100vh;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box {
            height: 50px;
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
        }
</style>
5.table-cell（宽高不能是百分比）
<style>
        body {
            width: 1000px;
            height: 200px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .box {
            display: inline-block;
            height: 50px;
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
        }
</style>
6.js
<style>
        body {
            position: relative;
        }

        #box {
            height: 50px;
            width: 100px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
        } 
</style>
<body>
    <div class="box">
        安徽大学
    </div>
    <script>
        var HTML = document.documentElement,
            WinW = HTML.clientWidth,
            WinH = HTML.clientHeight,
            boxW = box.offsetWidth,
            boxH = box.offsetHeight;
        box.style.position = 'absolute';
        box.style.left = (WinW - boxW) / 2 + 'px';
        box.style.top = (WinH - boxH) / 2 + 'px';
    </script>
</body>
m0_47737989
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
六种方法,让盒子水平垂直居中-------父盒子下,子盒子的六种水平居中方式
SanRenKing的博客
11-12 238
盒子水平垂直居中的六种方式
weixin_50789156的博客
09-03 336
盒子水平垂直居中的六种方式 1. 绝对定位加margin：auto position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; demo1: .box{ width: 100vw; height: 100vh; background-color: antiquewhite; position: relative; } .child{ width: 200px; height: 100
掌握盒子水平垂直居中的六大方案——面试重点
qq_38178056的博客
12-30 430
掌握盒子水平垂直居中的六大方案——面试重点 前言：今天主要分享一个前端面试题中90%会问到的一个问题——关于如何实现盒子水平垂直居中，在面试时，面试官往往会问，有两个盒子，如何让一个盒子在另一个盒子中水平垂直居中，或者面试官直接在纸上画两个盒子，你跟我说说怎么让里面的盒子水平垂直居中，下面我列出主要的六大解决方案： 定位（三种） flex JavaScript display:table-cel...
如何让一个div盒子水平垂直居中（实现代码如下：）
weixin_43748930的博客
03-27 1944
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
水平垂直居中多种实现方式
cpc980209的博客
08-26 113
水平垂直居中多种实现方式
html让盒子水平居中,CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法...
weixin_35353583的博客
07-02 596
CSS实现盒子模型水平居中的方法水平居中效果图水平居中全局样式.parent {color: #FFFFFF;height: 200px;width: 200px;margin: 0 auto;background-color: #000000;}.child {width: 50px;height: 50px;background-color: #26f12d;}第一种：margin+width...
html 位置水平垂直居中,CSS布局：实现水平垂直居中的多种方法
weixin_42304618的博客
06-09 383
CSS布局：元素水平垂直居中本文将依次介绍在不同条件下实现水平垂直居中的多种方法水平垂直居中是在写网页时经常会用到的需求，在上两篇博客中，分别介绍了水平居中和垂直居中的方法。本文的水平垂直居中就是将之前的水平居中和垂直居中用到的方法综合起来。用到的原理都是一样的。相信掌握水平居中和垂直居中的方法后，就能自己总结如何实现水平垂直居中Tip：下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应...
水平垂直居中多种实现方式（html+css）
Longyearning的博客
07-31 111
在网页布局中，这是非常常用和基础的问题。往往面试中也会经常出现。针对此问题，根据是否可以不设宽高分别归纳了一下几种方式。
css盒子水平垂直居中
song854601134的博客
11-23 315
一.水平居中 方案一:text-align:center 给父元素添加`text-align:center`; 子元素若为行内元素、行内块元素，文本，则可以实现水平居中。 方案二:单个块级元素水平居中用margin 凡是使用margin来居中（水平居中/垂直居中）子元素必须有宽度/高度，不然margin无效。 子元素宽度必须`小于`父元素宽度。 方案三：多个块级元素水平居中用行内块 1.子元素设置 display: inline-block; 2.给父元素添加 text-align:center;
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
11-24
实现盒子水平垂直居中的方法有多种，以下是三种常见的方法： 1. 方法一：使用 `position` 定位（适用于子盒子有宽度和高度的时候） 使用 `position: absolute;` 和 `left: 50%;` 和 `top: 50%;` 可以实现盒子水平...
盒子上下左右居中设置
12-25
`与父元素的`line-height`配合使其垂直居中。 ```css .parent { text-align: center; line-height: 200px; /* 假设子元素的高度为200px */ } .child { display: inline-block; vertical-align: middle; }...
01拓展-居中方式.pptx
01-25
实现图片在盒子中水平垂直居中的方法有多种，下面我们将介绍三种常见的方法： 方法一：使用绝对定位 ```css div { position: relative; } img { position: absolute; left: 50%; top: 50%; transform: ...
01拓展-居中方式.pdf
01-25
五、图片在盒子中水平垂直居中的三种方式 在实际开发中，我们常常需要将图片居中在盒子中。下面是三种实现方式： 1. 使用弹性布局flex ```css .father { display: flex; justify-content: center; align-items:...
flex弹性盒子布局实例
11-08
2. `justify-content`：控制flex项目在主轴上的对齐方式，包括`flex-start`（靠左/上）、`flex-end`（靠右/下）、`center`（居中）、`space-between`（两端对齐，项目之间等距）、`space-around`（项目周围等距）。...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2836
title>充电效果
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 310
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 535
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
最新发布
艾恩小灰灰的博客
07-15 148
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
盒子垂直水平居中的方法 代码实现
06-02
实现盒子垂直水平居中的方法有多种，以下是其中的一种方法： HTML 代码： ``` <!-- 盒子内容 --> ``` CSS 代码： ``` .container { display: flex; justify-content: center; align-items: center; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值