如何使一个 div 居中显示

最新推荐文章于 2024-09-04 12:52:05 发布

skyandcode

最新推荐文章于 2024-09-04 12:52:05 发布

阅读量1w

点赞数

分类专栏：网页前端

本文链接：https://blog.youkuaiyun.com/skyandcode/article/details/22833007

版权

网页前端专栏收录该内容

5 篇文章

订阅专栏

在 chrome 或 FireFox里，使用

body{

margin:0px;

padding:0px;

}

div{

magin:0 auto;

}

即可让一个 div 居中显示，但在 IE 里不支持。

方法1. 使用 margin-left:10% 比如，我的 div 占整个浏览器的 80%，则这样设置就可以居中了:

div{

width:80%;

margin-left:10%;

}

方法2. 更通用的做法是使用 !Document 指定标准。

在页面开头引入：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

body {

margin:0px;

padding:0px;

}

div{

magin:0 auto;

}

这样就可以在多个浏览器兼容了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

skyandcode

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

让横向排列的几个浮动(float:left)的子div居中显示

09-25

综上所述，通过在父容器中嵌套一层额外的div，并将该层div设置为内联块级元素，并通过text-align:center属性使其居中，然后再将浮动元素放置于这个居中的内联块级元素内，最终能够实现浮动子div的水平居中显示。...

让几个横向排列的浮动子div居中显示的方法

09-25

这是一个常见的解决浮动元素居中问题的方案，适用于那些需要保持浮动布局，同时又想实现居中显示的场景。需要注意的是，这种方法在某些旧版本的浏览器中可能不完全兼容，因此在实际开发中，可能需要结合其他技术，...

参与评论您还未登录，请先登录后发表或查看评论

(转载）关于使用CSS居中(包括水平/垂直)

jackyrongvip的专栏

02-11

1366

关于使用CSS居中(包括水平/垂直)关于使用CSS居中(包括水平/垂直) 用CSS如何使DIV层水平居中这两天开始对网志进行大刀阔斧的页面更改.今天碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索

HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

热门推荐

吟游诗人——吟唱生命的不朽

08-11

53万+

最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。水平居中直接加上&lt;center&gt;标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中（水平居中+垂直居中）的方法放上示范的html代码：&lt;body&gt; &lt;div class=&quot;main&quot;&gt;

怎么让DIV居中

tel15277169530的博客

06-06

472

http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto;

设置div居中的方法

xufang461010923的专栏

07-12

2万+

对div居中方法的总结，包括 position 定位、flex布局、margin 等知识点

div居中显示

高级项目经理、专注于技术架构、分享项目管理及职场心得

06-09

415

怎么设置css样式，让div居中显示。方法一 <div class='big'> <div class='small'>box1</div> </div> style样式： .big{ height:200px; width:200px; border:black solid 1px; position:ab...

jQuery实现的浮动层div浏览器居中显示效果

10-20

本篇文章将详细讲述如何使用jQuery实现一个浮动层（Div）在浏览器中居中显示的效果。首先，我们需要在HTML页面的`<head>`部分引入jQuery库。在文档中，我们通过`<script>`标签引入了jQuery的压缩版本（`jquery-...

div居中显示的css样式代码

09-25

本文将深入讲解如何使用CSS来使`div`元素水平和垂直居中，并通过一个具体的示例进行解释。首先，我们来看提供的代码片段： ```html html * {margin:0; padding:0;} body {font-family:Geneva, Arial, ...

让两个Div并排显示的多种方法

09-25

上述代码创建了两个浮动的div元素，并在浮动元素后添加一个clear both的div来清除浮动，防止后续内容被影响。三、使用绝对定位position:absolute来让两个div并排显示绝对定位允许你将元素放置在相对于最近的已...

div屏幕居中显示

记录移动开发相关的知识

10-26

2070

.main{ position:absolute; top:50%; left:50%; width:200px; height:100px; margin-top:-50px; margin-left:-100px; border:1px solid red; line-height:30px;

让div居中的方式的几种方法

恒二哥的博客

11-04

7万+

可能讲述得不清楚，能看懂就好了。

CSS中怎么让DIV居中

wangchaoqi1985的博客

06-27

510

CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV

DIV-CSS 之让 DIV 居中显示

ETHAN IN IT

01-27

939

body,div {margin:0;padding:0;} /*解决IE下居中*/ body {text-align:center} /*#content { margin-left: auto; margin-right: auto; width:800px; height:600px; background:#000; po

如何使div居中？CSS居中终极指南

2303_76218115的博客

09-04

3211

接触前端这么多年来我曾把 CSS 看作是一系列模式的集合，实际上有很多方法可以用来解决当前遇到的问题。这种方法虽然能奏效，但也感觉有些局限。时不时地一些看似正常的代码会突然出现问题实际运行效果和以前完全不同。花时间深入学习 CSS 时之前老旧的固定方式，而是能够凭直觉灵活的来解决问题！✨在本文中探讨了一些实用的居中模式，希望它们能在你需要居中对齐时派上用场。其这也只是触及了CSS 中居中对齐的冰山一角！与其死记硬背更多的代码片段，不如建立一个全面的 CSS 理解模型，这样可以即时提出解决方案！

div居中

痞子51998

04-25

274

.maincontainer{ margin:0px,auto;} body{text-align:center}为了兼容更多浏览器。

css让一个div居中显示

最新发布

12-05

在CSS中，有多种方法可以让一个`div`元素居中显示。以下是几种常用的方法： ### 方法一：使用Flexbox Flexbox是一种强大的布局模块，可以轻松实现居中对齐。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox居中</title> <style> .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 容器高度为视口高度 */ } .box { width: 200px; height: 200px; background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> ``` ### 方法二：使用Grid布局 CSS Grid也是一种现代的布局方式，可以轻松实现居中对齐。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid居中</title> <style> .container { display: grid; place-items: center; /* 同时水平和垂直居中 */ height: 100vh; /* 容器高度为视口高度 */ } .box { width: 200px; height: 200px; background-color: lightgreen; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> ``` ### 方法三：使用绝对定位和变换这种方法适用于需要兼容旧版浏览器的情况。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位居中</title> <style> .container { position: relative; height: 100vh; /* 容器高度为视口高度 */ } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: lightcoral; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> ``` ### 方法四：使用Margin自动这种方法适用于已知元素宽度和高度的情况。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Margin自动居中</title> <style> .container { position: relative; height: 100vh; /* 容器高度为视口高度 */ } .box { width: 200px; height: 200px; margin: 0 auto; /* 水平居中 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: lightyellow; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> ``` 以上方法各有优缺点，可以根据具体需求选择合适的方法。

如何使 一个 div 居中显示

如何使一个 div 居中显示