div盒子在页面中水平垂直居中的几种方法。

谁借莪１个温暖的怀抱￠ 2022-06-11 06:43 154阅读 0赞

### 方法一：设置绝对定位absolute，然后margin为自动 ###

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
    
            #container {
                width: 600px;
                height: 500px;
                border: 1px solid #000;
                margin:auto;
                position:absolute;
                background-color: #0096e6;
                left:0;
                right:0;
                bottom:0;
                top:0;
            }
        </style>
    </head>
    <body>
        <div id="container">
        </div>
    </body>
    </html>

![Center][]

### 方法二：用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px。 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>上下垂直居中 blhere</title>
        <style>
            #main {position: absolute;
                width:400px;
                height:200px;
                left:50%;
                top:50%;
                margin-left:-200px;
                margin-top:-100px;
                border:1px solid #00F;
                background-color: antiquewhite;
            }
        </style>
    <body>
    <div id="main">DIV水平居中和上下垂直居中</div>
    </body>
    </html>

![Center 1][]

[Center]: /images/20220611/89d33fb5b40a49ee867127b1eaceb1e7.png
[Center 1]: /images/20220611/776c2e8e3e144092a311324618a845e6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现文字或者div盒子水平垂直居中的方法

实现水平垂直居中的方法文本（文字）内容属于行内元素行内元素水平垂直居中方法方式一：设置文字外层的盒子 text-align:center

左手的ㄟ右手/ 2023年08月17日 16:52/ 0 赞/ 83 阅读

相关 div垂直居中的几种方法

第一种 1. 父类 .father { height:100%; // height:100vh; width:100%;

小鱼儿/ 2023年03月03日 08:48/ 0 赞/ 159 阅读

相关 css 使div水平垂直居中的几种方法

一、脱离文档流元素的居中方法一：margin:auto法 div{ width: 300px; height: 300

刺骨的言语ヽ痛彻心扉/ 2022年12月16日 06:27/ 0 赞/ 100 阅读

相关盒子水平垂直居中的11种方案

1、定位+margin拉回 <style> box { width: 100px; height: 100px; position: relative; back

向右看齐/ 2022年12月10日 07:16/ 0 赞/ 107 阅读

相关 div盒子在页面中水平垂直居中的几种方法。

方法一：设置绝对定位absolute，然后margin为自动 <html lang="en"> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月11日 06:43/ 0 赞/ 155 阅读

相关 CSS水平垂直居中的几种方法

方法1： “margin:auto”结合”position:absolute” //css代码： .box1{ width:200px;

╰+攻爆jí腚メ/ 2022年05月17日 21:19/ 0 赞/ 206 阅读

相关让div垂直水平居中的几种方法

参考文档：[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92][https_git

r囧r小猫/ 2021年11月10日 06:04/ 0 赞/ 333 阅读

相关 CSS垂直水平居中的几种方法

作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 ![aHR0cHM6Ly91c

柔光的暖阳◎/ 2021年10月24日 01:14/ 0 赞/ 756 阅读

相关 div水平垂直居中的方法

在平时，我们经常会遇到让一个div框针对某个模板上下左右都居中(水平垂直居中)，其实针对这种情况，我们有很多种方法实现。方法一：绝对定位法，不确定当前div

本是古典何须时尚/ 2021年07月25日 12:55/ 0 赞/ 470 阅读

相关 div盒子水平垂直居中的方法

<div class="wrapper"> 我不知道我的宽度和高是多少，我要实现水平垂直居中。 </div> 一、盒子没有固定的

╰半橙微兮°/ 2021年07月24日 11:26/ 0 赞/ 452 阅读