`
hm4123660
  • 浏览: 282433 次
  • 性别: Icon_minigender_1
  • 来自: 广州
博客专栏
Dea4ce76-f328-3ab2-b24a-fb268e1eeb75
数据结构
浏览量:69994
社区版块
存档分类
最新评论

div盒子居中

阅读更多

1.实现div水平居中

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户登入</title>
<style>
        #login_form{
            width:450px;
            height:300px;
            margin: 0 auto;  /*左右距离为auto,实现水平居中*/
background: #000000;
        }
    </style>

</head>
<body  style="background: #0079d2;margin: 0;padding: 0;">

<div id="login_form">

</div>
</body>
</html>

实现效果:


 

2.实现div盒子居中(水平垂直)

html代码:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户登入</title>
   <style>
        #login_form{
            /*利用绝对定位实现*/
position: absolute;
            width:450px;
            height:300px;
            /*使div左上的点居中*/
left:50%;
            top:50%;
            /*使盒子往左上分别移动宽高的一半,实现居中*/
margin-left:-225px;
            margin-top:-150px;
            background: #000000;

        }
    </style>


</head>
<body  style="background: #0079d2;margin: 0;padding: 0;">

<div id="login_form">

</div>

</body>
</html>

运行效果:



 
  • 大小: 2.3 KB
  • 大小: 2.1 KB
分享到:
评论

相关推荐

    div层居中代码下载

    ### DIV层居中技术详解及应用 #### 一、引言 在网页设计与开发过程中,经常需要将页面中的元素(如DIV)居中显示,以达到更好的视觉效果和用户体验。本文将详细介绍如何实现DIV的水平居中以及垂直居中,并提供具体...

    div 垂直居中的多种方法详细介绍

    最后,CSS3的弹性盒子模型提供了一种更为简便和直观的方式来实现垂直居中,通过设置`flex-direction:column`和`justify-content:center`,可以使容器内的所有项目沿垂直方向居中。这种方式不仅简洁,而且性能较好,...

    div盒子模型.pdf

    "div盒子模型.pdf" 本文主要讲解了 CSS 盒子模型的概念和应用。CSS 盒子模型是指在网页设计中,对 div 元素的布局和样式的控制。它具有四个主要属性:内容(content)、填充(padding)、边框(border)和边界...

    css控制div中元素居中的示例.pdf

    如何让 DIV 盒子水平居中呢?本节 DIVCSS5 让大家实现 DIV 布局水平居中。 一、display: inline-block 使用 display: inline-block 属性可以使 DIV 元素变成行内块元素,从而实现水平居中。 二、margin: 0 auto ...

    网页插入广告图片代码

    通过调用wecenter的css结构,进行一个居中和div盒子居中的操作,实现了网页任何位置插入图片的效果 插入到任何需要的地方即可

    css中position:fixed实现div居中上下左右居中

    在CSS布局技术中,使DIV元素在浏览器窗口中上下左右居中是一个常见的需求。通过使用CSS的定位属性,我们可以通过多种方法来实现这一效果。本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 ...

    盒子上下左右居中设置

    本文将深入探讨如何使用HTML5和CSS来实现盒子(div元素)的上下左右居中设置。 首先,我们需要理解CSS中的定位机制。在CSS中,有三种主要的定位方式:正常流定位、浮动定位和绝对定位。正常流定位是元素默认的布局...

    两个DIV同一行显示

    **Flexbox(弹性盒子)** Flexbox是一种更为现代且强大的布局模式,它提供了一种更加灵活的方式来对齐和分布元素。与浮动相比,Flexbox能够更好地处理响应式设计,使页面布局更加容易管理。 ```css .container { ...

    CSS盒子居中的常用的几种方法(小结)

    第一种: 用css的position属性 ... .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { width: 40px; height: 40px; background-color: red;

    01拓展-居中方式.pptx

    一、 绝对定位的盒子居中 在CSS中,我们可以使用绝对定位来实现盒子的居中。下面是一个简单的示例代码: ```css div { position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; ...

    01拓展-居中方式.pdf

    一、绝对定位的盒子居中 在 HTML 结构中,我们可以使用绝对定位来实现盒子的居中。下面是一个简单的示例: HTML 结构: ```html &lt;div class="father"&gt; &lt;div class="son"&gt;&lt;/div&gt; &lt;/div&gt; ``` CSS 样式: ```css ....

    使用CSS实现盒子水平垂直居中的方法(8种)

    原始代码: center.html: &lt;!DOCTYPE html&gt; &lt;html lang=Zh&gt; &lt;head&gt;...meta name=viewport content=width=device-width, initial-scale=1.0&gt;... &lt;div class=father&gt; &lt;div class=son&gt;&lt;

    超级牛最详细的Div+CSS布局案例.docx

    CSS 盒模型是 DIV+CSS 布局的核心概念,它是指使用 DIV+CSS 来代替表格布局,通过由 CSS 定义的大小不一的盒子和盒子嵌套来编排网页内容。这种排版方式的网页代码简洁,能兼容更多的浏览器。 在制作网站时,我们...

    Div+css页面布局资料(很好很强大)

    ### CSS盒子模型与Div+CSS页面布局 #### CSS盒子模型概览 在深入探讨Div+CSS页面布局前,我们首先需要了解CSS盒子模型的基本概念。CSS盒子模型是Web设计中的核心概念之一,它用于描述HTML元素如何根据CSS属性在...

    使用div+css开发个人网站毕业设计.doc

    此外,文档还提到了div+css在不同浏览器间的兼容性问题,例如div的垂直居中、margin加倍、IE浏览器特有的显示问题等,并给出了相应的解决策略。这提醒开发者在设计时需考虑跨浏览器兼容性,确保网站在各种环境下都能...

    CSS+DIV.ppt

    7. 两列固定宽度居中:两个并排`&lt;div&gt;`居中,保持固定宽度。 8. 三列浮动布局:三列通过`float`属性排列,中间列宽度自适应。 CSS+DIV布局允许设计者将内容和样式分离,提高了代码的可读性和复用性,使得网页在不同...

    《精通CSS+DIV网页样式与布局》光盘源码

     11.2 固定宽度且居中的版式  11.3 左中右版式   11.4 块的背景色问题  11.5 排版实例:电子相册   11.6 div排版与传统的表格方式排版的分析   第12章 CSS+div美化与布局实战   12.1 框架搭建  ...

    DIV+CSS之弹性盒模型布局

    2. `justify-content`: 用于在主轴上对齐项目,有`flex-start`(默认,靠左/上)、`flex-end`(靠右/下)、`center`(居中)、`space-between`(两端对齐,项目之间等距)和`space-around`(每个项目周围等距)等...

    精通CSS.DIV.网页样式与布局 源码

     11.2 固定宽度且居中的版式  11.3 左中右版式   11.4 块的背景色问题  11.5 排版实例:电子相册   11.6 div排版与传统的表格方式排版的分析   第12章 CSS+div美化与布局实战   12.1 框架...

Global site tag (gtag.js) - Google Analytics