如何居中div？
居中div的方法有以下几种：
- 使用CSS中的text-align属性进行居中。
div {
text-align: center;
}- 使用CSS中的margin属性进行居中。
div {
margin: 0 auto;
}- 使用CSS中的flex布局进行居中。
div {
display: flex;
justify-content: center;
align-items: center;
}- 使用JavaScript代码实现居中。
function centerDiv() {
const div = document.querySelector('div');
const parent = div.parentNode;
const parentWidth = parent.offsetWidth;
div.style.left = `${parentWidth / 2 - div.offsetWidth / 2}px`;
}以上方法都可以实现div的居中。具体使用方法可以根据实际情况进行选择。
相关·内容
当我想在居中的父div中向左或向右浮动子div时，整个设计会向左或向右移动，具体取决于浮动。那么，如何浮动子div，并使居中的父div居中。
HTML：
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS：
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: le
浏览 3提问于2012-10-10得票数 4
回答已采纳
4回答
我知道如何使div层相对于它的包装器或父容器居中，但是当我在页面主体的div中有div时又该怎么办呢？如何使最小的div相对于正文居中？
<div id="1" style="width: 100%">
<div id="2" style="width: 22.5%; height: 1000000000px; margin-left: 12%;">
<div id="3" style="position: absolute;">
</div>
<
浏览 0提问于2013-01-28得票数 0
回答已采纳
6回答
可以在容器中居中浮动div吗?如果可以，如何居中？
例如，我有一个包含容器div的页面，其中包含许多大小可变(动态生成)的浮动(左)div。div通常会溢出到下一行，但它们永远不会在容器div中居中，而是与左侧对齐。它看起来是这样的：
----------------------------
- -
- +++ +++++ ++++ ++ -
- +++ +++++ ++++ ++ -
- -
- ++ ++++++ +++ + -
- ++ +
浏览 1提问于2010-07-23得票数 33
回答已采纳
9回答
我该如何解决这个问题？向div添加边框时，div不居中，span12类也不居中。
我想用边框居中显示div
<div class="row" >
<div class="span12" style="border: 2px solid black">
<div class="row">
<div class="span4">
1
</div>
<div c
浏览 0提问于2013-03-11得票数 68
我需要将文本居中。我使用了文本居中对齐，但下一行居中。我需要它与顶部的线对齐。
<div class="box">
<div class="text">Some text.Some text.Some text.Some text.Some text.Some text.Some text.
Some text.Some text.Some text.Some text.Some text.</div>
</div>
如何在下一行不相对于顶行居中的情况下将文本块居中？
浏览 0提问于2013-05-15得票数 1
回答已采纳
1回答
在下面的示例中，我试图用一个.centered类将包含数字的div居中，但它没有居中。我如何使它们居中，使它们坐在行的中间而不是左边？
CSS：
.centered {
margin: 0 auto;
}
DIVs：
<div class="row">
<div id="83" class="square centerd">83</div>
<div id="84" class="square centered">84</div>
<
浏览 3提问于2018-03-07得票数 2
3回答
如何在这里将跨度和图像垂直居中？
<div id="foo">
<span>Im great</span>
<image src="">
</div>
div {
height:350px;
background:yellow;
}
div span{
line-height: 350px;
background: red;
}
当我删除图像时，跨度是居中的，但如果我添加图像，跨度不是居中的，任何more..why？
浏览 1提问于2013-01-28得票数 0
通常情况下，margin left: auto和margin right: auto会在父div中居中放置div，但此解决方案基于视点大小，这意味着如果父div大小大于视点，则仅将子div居中于父div的可视部分。
如何根据父级的实际大小居中子div，而不是基于父级的视点大小？
谢谢,
浏览 0提问于2013-12-13得票数 0
5回答
我有一个div，里面是另一个divs.My div：<div id="Table_01"></div>
我如何使它居中，以便所有其他div都居中？
浏览 0提问于2010-11-05得票数 0
回答已采纳
4回答
Bootstrap中的中心导航栏
、、、、
如何使用bootstrap将菜单居中？
HTML：
<nav class='navbar navbar-default'>
<div class='container-fluid container'>
<div class='navbar-header'>
<a class='navbar-brand' href='#'>Title</a>
</div>
<div id=&#
浏览 2提问于2016-10-10得票数 1
如何让遮罩div中的center div居中对齐？ 样式： <style type="text/css">
.mask {
position: absolute; top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
width: 100%;
height: 100%
浏览 50提问于2018-07-20得票数 0
回答已采纳
2回答
CSS绝对div居中
、、、
如何使绝对div居中？
<div class="photoWindow">min width 600 px, absolute</div>
jQuery
var widthScreen = $(window).width();
$('.photoWindow').css({'margin-left': widthScreen / 2 - widthScreen, 'left':'50%'});
但是，这不会使div居中。
浏览 0提问于2011-03-08得票数 1
回答已采纳
如何在网页的其他内容上显示div？此div必须垂直和水平居中，如下例所示：
我试过这个：
<div style = "position: absolute; top: 50%; left: 50%;">DIV content</div>
在本例中，只有左角居中，而不是div本身。
浏览 4提问于2011-07-15得票数 6
回答已采纳
2回答
我有一个容器div，里面有我想居中的文本。我还想将一个div插入到向右浮动的容器中，如下所示：
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
不幸的是，文本不再相对于容器居中，而是以子对象的宽度向左移动。
有没有人知道如何让文本居中，同时将div放在右边？
浏览 0提问于2012-11-10得票数 9
回答已采纳
我尝试了一下bootstrap，然后我发现了一个恼人的问题，那就是如何将span类居中。在尝试了offset来使一些跨度居中之后，我可以像这样将某个跨度类居中(使用offset2的span8，或者使用偏移量3的span6 )，但问题是，我想要将span7/span9/span10居中。
然后我试着用一些技巧使span10居中..。
<div class="container"> <!--Or span12 since the width are same-->
<div class="row">
<div c
浏览 1提问于2012-09-12得票数 7
我知道可以在父div上使用text-align: center;将其所有子元素居中，但如果我不希望所有子元素居中怎么办？我只想，比方说，一个子元素相对于父元素居中。
假设我的所有东西都在一个包装器div中。一些标题，表单等。但在底部，我想居中一小行文字归功于一些东西。如果它的层次结构是body > div.wrapper > div.credit，我该如何实现？
浏览 4提问于2013-02-15得票数 0
回答已采纳
我需要在1/3行空间中对齐项目(1)，在其余行空间(2/3)居中对齐另一项(2)。
如何将项目居中到它们适合的特定空间，以便它们不会居中取决于它们的大小，而取决于它们签名的空间的大小(1/3和2/3)？
body {
border: 1px dotted yellow;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: brown;
}
.container {
background: red;
width: 250px;
height: 100px;
}
.box {
浏览 1提问于2018-11-26得票数 6
回答已采纳
2回答
垂直居中竖排文本
、、
我有一些垂直的文本，我不能在他们的div中垂直居中。下面是一个例子：
请参见3个div (2个橙色和1个红色)。divs中的文本没有垂直居中，导致文本泄漏到div之外。
我已经用vertical-align: middle试过了，但是什么也做不了。
如何在div中垂直居中竖排文本？
浏览 5提问于2013-10-08得票数 3
7回答
如何使图像居中？
、、
这张图片不应该居中吗？如果不是，如何使其居中？
<div class="logo-area">
<div class="logo-bg">
<a href="index.html"><img src="images/logo.jpg" align="middle" /></a>
</div>
浏览 0提问于2013-06-14得票数 1
我有一个使用Bootstrap 3的网页。在这个网页中，我试图在col-xs-12中居中放置一个ul。目前，在这个中，我有以下内容：
<div class="container">
<div class="row">
<div class="col-xs-12 center-block" style="background-color:grey;">
<ul class="list-inline">
<li><
浏览 41提问于2017-01-10得票数 5
我有一个包含img的div，现在我会将它居中，但如果我尝试margin: 0 auto，它不起作用。
<div style="display: inline-block">
<img src=""/>
</div>
如何使整个div居中，包括img？
浏览 0提问于2012-02-22得票数 3
回答已采纳
例如，它们导致了关于自动边距的完全不同的行为。
看看这把小提琴：
<style>
.fixed {
display:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.centered {
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
<div class="fixed">
<div
浏览 0提问于2015-08-11得票数 1
1回答
如何使下列表格居中，使其垂直居中？
<form>
<div class="row collapse">
<div class="large-6 columns">
<div class="row collapse postfix-round">
<div class="small-9 columns">
<input type="text">
</div>
浏览 2提问于2015-08-22得票数 1
回答已采纳
我有一个div，需要在另一个div内水平地居中。问题是，内部div几乎是居中的，也就是说，它是居中的，但是有一个左边距/填充(我无法确定哪一个)在5-10 it左右。如何使内部div以外部div为中心？
HTML：
<div class="outer">
<div class="inner">
// stuff
</div>
</div>
CSS：
.outer {
position:relative;
display:inline-block;
width:
浏览 2提问于2013-12-19得票数 0
回答已采纳
3回答
什么是td的默认css，使其能够自动垂直地居中？
我知道如何使事物水平地居中，因为div比它的父margin: 0 auto小，但是什么允许td自动垂直地居中呢？
#outer {
width: 200px;
height: 200px;
background-color: yellow;
}
#inner {
width: 60%;
margin: auto;
background-color: red;
}
<div id="outer">
<div id="inner">
centered
浏览 3提问于2017-04-11得票数 0
回答已采纳
3回答
我正在开发一个bootstrap风格的网站，我有文本需要居中。我已经使用center align将它在水平维度居中，但我不知道如何在行中垂直居中。
<div class="col-md-6">
<p align="center">Some Text that needs centering.</p>
</div>
“align=”center“”负责水平对齐，但我不知道如何将文本放在行的绝对中心。
浏览 5提问于2014-05-02得票数 2
2回答
我有一个关于使用div#container居中页面的问题，通常容器代码是这样的：
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
容器div标签包装了我想要在其中居中对齐的那部分代码。
例如，我们有2个对象A和B，_object A是绝对位置，B是相对位置
对象A和对象B都包装在容器内
问题:只有对象B(相对位置)居中对齐，对象A(绝对位置)不居中对齐
那么，如何将已经定位为绝对位置的东西居中呢？感谢您的解释
浏览 2提问于2009-06-15得票数 2
1回答
% height的行高
、、、
当我想在div中将文本垂直居中时，例如添加line-height；
<div class="text"> Text </div>
.text{
height:50px;
line-height:50px;
}
但是如果height:5%，如何为line-height赋值以在div中将文本垂直居中？
浏览 0提问于2012-12-21得票数 0
我正在努力实现以下目标:我在页面的中央有一个垂直和水平的中间div (wrapper)。在该div中，我希望有另外2个div，其中一个将包含徽标，另一个将包含一些文本。徽标图像还必须与其div的中心垂直和水平对齐。目前，我所拥有的是：
下面是我的HTML和CSS的jsfiddle：
我如何才能使logo div居中(仅水平居中，并具有10px的页边距-顶部)，并使logo图像在该div内居中，水平和垂直居中，就像现在一样？
浏览 2提问于2012-10-16得票数 1
回答已采纳
2回答
我尝试将文本元素在流畅的布局中居中，这意味着<div>的大小不是固定的。
我发现了一个非常好的解决方案，可以将父<div>中的子<div>水平和垂直居中，它的工作方式是：。(原文来自)
但是，如小提琴中所示，Large Text元素并不是垂直放置在父<div class="block">的中心，而是整个子<div class="centered">居中。
我尝试将这两个文本元素拆分为两个单独的<div>，并将只包含Large Text元素的那个放在中心。但是，当包含small text的第二
浏览 0提问于2012-08-21得票数 0
4回答
我正在尝试让提交按钮居中页面。我的html代码是：
<div class="container-fluid">
<div class="row" style="margin-right:0;margin-left:0">
<form method="POST"
action="https://api.instagram.com/oauth/authorize/redirect_uri=http://hanie-asemi.ir/laravel/public/instagram/
浏览 0提问于2017-07-08得票数 1
2回答
我正在编写一个p5.js游戏，我必须在我的画布上绘制一个按钮，一个输入和一个p元素。我想让所有这些元素相对于画布居中。
我尝试了这个解决方案，但没有成功：
var gameCanvas = createCanvas(600, 600);
gameCanvas.parent("game-container");
input = createInput();
input.position(280, 300);
input.parent("game-container");
我有一个带有游戏创造者id的div，这项工作直到我通过css将div居中。当我将div居
浏览 0提问于2016-12-18得票数 0
5回答
下面是一个父div，如下所示
.div parent{
width:100%;
height:100%;
text-align:center;
}
.div child{
width:10%;
height:10%;
}
在响应式web移动设备中，子div不是垂直居中对齐，如何才能居中对齐？？请帮帮我..
谢谢。
浏览 0提问于2013-12-18得票数 0
4回答
不知道该如何命名问题。我有一个这样的html结构：
<div id="nav"></div>
<div id="wrapper">
<div id="content">
</div>
</div>
使用像这样的css：
#nav {
width: 200px;
height: 50px;
margin: 0 0 0 -100px;
position: fixed;
left: 50%;
backgroun
浏览 0提问于2012-03-23得票数 6
1回答
我有这样的代码：
<div class="col-xs-12 col-lg-4"> </div>
当它中断(1列/行)时，列不是居中的。如何使其居中？
浏览 0提问于2015-06-30得票数 0
2回答
想用CSS垂直居中div。不想要表或Javascript，但只有纯CSS。找到了一些解决方案，但都缺少对Internet Explorer 6的支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主流浏览器（包括Internet Explorer 6）中垂直居中div？
浏览 574提问于2017-12-06
3回答
引导带4:
如何将包含图像和文本的div水平居中到图像的右侧？
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| | Heading |
+ IMG +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| | Lead
浏览 4提问于2019-12-29得票数 0
回答已采纳
2回答
我试图使2个图像和这些图像之间的文本顶部栏。但是我不能把文本居中。我正在为移动设备做这件事。
这是我的html
<img src="1.jpg" />
Company Name
<img src="2.jpg" />
我尝试了下面的代码，但不起作用。我无法将文本居中
<div style="float:left"><img src="1.jpg" /></div>
<div>Company Name</div>
<div style="
浏览 1提问于2013-06-12得票数 0
回答已采纳
我还不能想出如何在用户缩小时将内容垂直居中。
我有3个div，当它们被放大时，它们会靠近顶部，而不是像这里看到的那样居中：
蓝色只是第二个div的背景。我需要他们垂直居中，而不是停留在顶部，因为用户缩小。(Cntrl/cmd -)
浏览 0提问于2013-07-31得票数 1
所以我有一个带有navbar和一堆内容的页面。守则的大纲如下：
.container {
display: flex;
justify-content: center;
align-items: center;
}
<div class="navbar">
<!-- Various navbar links here -->
</div>
<div class="container">
<!-- Some content here -->
</div>
我希望conta
浏览 6提问于2017-10-23得票数 1
回答已采纳
我有： <div id="root" class="container-fluid">
<div>
<div class="row justify-content-center">
<div class="col">
<form> 并且表单(宽度较小)没有居中。如果我将一个数字添加到col分区(即，col-4)，那么小的列将居中，但表单在其中左对齐，并开始在小视口中奇怪地包装。将justif
浏览 25提问于2020-10-27得票数 0
4回答
居中文本不工作
、、
我有一个带文本的span和一个包装它的div。我正在尝试在span中居中显示文本。我尝试使用flexbox将其居中，但它不起作用。它是水平居中的，而不是垂直居中的。我做错了什么，我如何才能纠正它？ ( span存在的唯一原因，是为了让我可以将文本居中。如果我可以在不使用span的情况下将文本居中，那么我就不会使用它。) JSFiddle #headerScrollDown {
font-size: 85px;
font-family: monospace;
border: 2px solid black;
border-radius: 50%;
width:
浏览 64提问于2016-09-02得票数 0
回答已采纳
2回答
我有一个很大的div。它包含一堆缩略图。我希望div中的缩略图在div中居中，div在页面上居中。但我也希望div的宽度是动态的，这样你就可以看到每个分辨率上的所有缩略图，居中。我怎样才能做到这一点呢？
这是我到目前为止所知道的：
<div id="container">
<div class="thumb"><img /></div>
<div class="thumb"><img /></div>
<div class="
浏览 0提问于2011-07-01得票数 1
回答已采纳
我正在使用Bootstrap来建立一个网站。
我不知道如何将一个位于另一个<div>中的<div>居中。我相信我应该能够使用-offset来完成这一点，但是当它不是偶数时，肯定永远不可能精确地居中，或者有其他方法吗？
我需要在中将包含性别的<div>居中
浏览 0提问于2015-06-14得票数 0
1回答
具有自动宽度的自动边距
、、、
我正在尝试居中放置一个容器，里面有一排排方形的div。然而，为了让它正常工作，我已经将它简化为一个容器中的一个正方形。它需要自动宽度，但也需要居中。如何使使用自动宽度的容器div居中？只有当"panel“div的宽度固定时，它才会居中。
HTML FILE
<div class="panel">
<div class="item"></div>
</div>
CSS FILE
.panel {
position:absolute; /*This seems necessary to
浏览 0提问于2012-08-11得票数 0
如何使.container居中，使小屏幕上的项目位于左侧，.container居中。
我的示例
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.item {
width: 370px;
height: 250px;
background-color: #333;
margin: 0 30px 30px 0;
}
<div class="container">
<div class="item"><
浏览 3提问于2020-03-12得票数 0
我有一个来自bootstrap模板网站的工作示例网站，正在分析代码以了解他们是如何创建它的。即他们如何将文本居中放置在位于的第一页上。该代码片段的代码是，
<header class="masthead text-center text-white d-flex"> <!-- Background image set here -->
<div class="container m-auto">
<div class="row">
<div cl
浏览 0提问于2018-12-30得票数 0
我找不到如何使用flexbox将div元素垂直居中对齐，并将页脚元素与页面底部对齐。 HTML和CSS .section {
height: 100vh;
display: flex;
align-items: center;
}
.container {
width: 100%;
max-width: 1400px;
padding: 0 15px;
margin: 0 auto;
}
.section__header {
text-align: center;
}
.footer {
margin: auto;
浏览 27提问于2021-03-27得票数 1
2回答
我希望能够在导航栏中居中显示一些文本或图像，这就是我正在做的事情。
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="text-center navbar-text"
浏览 1提问于2014-12-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
