这是我的
<div class="overlay">
<div id="loading">
<img src="styles/images/30.gif">
</div>
</div>
我想让它垂直和水平地居中。
该图像仅为水平居中，如下面的屏幕快照所示：
我的CSS如下所示：
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right
浏览 3提问于2017-04-29得票数 1
回答已采纳
我正在使用这个脚本水平和垂直居中我的div。
当页面加载时，div会垂直居中，而不是水平居中，直到我调整浏览器的大小。
我做错了什么？
$(document).ready(function (){
$(window).resize(function (){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
浏览 5提问于2012-12-17得票数 36
回答已采纳
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
回答已采纳
46回答
我想用CSS垂直居中一个div。我不想要表格或JavaScript，只想要纯CSS。我找到了一些解决方案，但它们都缺少对Internet Explorer 6的支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主流浏览器(包括Internet Explorer6)中将div垂直居中？
浏览 37提问于2008-12-28得票数 1523
回答已采纳
4回答
css属性vertical-align: middle在本例中不起作用。
HTML：
<div>
<span class='twoline'>Two line text</span>
<span class='float'> Float right </span>
</div>
CSS：
.float {
float: right;
}
.twoline {
width: 50px;
display: inline-block;
}
div {
浏览 2提问于2011-11-01得票数 48
回答已采纳
6回答
我有这个简单的HTML代码，但是让我感到沮丧，因为它不能垂直地居中：
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
这是我的CSS：
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
.inner div实际
浏览 6提问于2015-02-05得票数 1
回答已采纳
我创建了两个矩形div(需要保持60 of宽和150 of高)，其中包含文本。文本是垂直排列在矩形中的，所以我使用transform: rotate(-90deg)垂直对齐文本。
我想让文字垂直和居中。在垂直旋转文本之前，我使用display: table和vertical-align: middle方法对文本进行居中。当文本是水平的时，这是完美的。但是，在旋转内容后，文本不会保持居中。CSS仍然将文本居中，就好像它是水平的。
我尝试使用绝对/相对位置从顶部和左侧偏移文本，但是当我删除display: table和vertical-align: center属性时，文本就消失了。
对于如何在保
浏览 10提问于2016-03-30得票数 1
回答已采纳
2回答
我有一个带有position:relative的文本框容器div (div.tb)，包含输入和占位符div，它们都有position:absolute。
问题是输入文本是垂直居中的，但是占位符文本不是垂直居中的。
所以我需要占位符文本垂直居中，就像输入一样。
HTML：
<div class="tb">
<div class="placeholder">username</div>
<input type="text" name="tb-username" />
&l
浏览 2提问于2012-05-09得票数 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
1回答
我正在使用一个div300px宽度，它包含一个必须垂直跨越的无序图标列表，以及一个按钮。
HTML/CSS需要什么样的外观才能：
( A)无序列表是否左浮动并垂直居中，B)在UL右侧有按钮，也是垂直居中的？
HTML：
<div class="hb-left">
<ul>
<li><img src="cat.jpg"></li>
<li><img src="dog.jpg"></li>
<li><img src="mo
浏览 2提问于2015-11-21得票数 1
我有一个div，它包含一个覆盖了文本的图形背景。我想水平和垂直居中这个元素。但是我不能让文本垂直居中。到目前为止，我有以下代码：
<div id="step">
<div id="background">
<img src="buttonbackground.png" class="stretch" alt="" />
</div>
<div>
<h3>some text</h3>
浏览 0提问于2012-02-24得票数 1
回答已采纳
我需要在div中对消息进行居中，就像父div有100%的宽度，并且水平地对消息进行居中是没有问题的。此外，如您所见，图标也是垂直居中的，但我不能垂直地将文本居中。到目前为止，我应用到该div的唯一css是
.content {
height: 100% ;
display: inline-block ;
}
对于为什么消息div在.container中向下移动的任何建议。这是正确的跨浏览器方法吗？
浏览 8提问于2013-09-20得票数 1
回答已采纳
我正在寻找一种干净的方式来显示底部对齐的垂直颜色条。当前的实现使用font-size调整高度，这很粗糙&结果是垂直居中的条形图。
HTML：
<div id="barChart">
{% for bar in bars %}
<div class="bar" style="border-left-color:{{color}};font-size:{{barHeight}}">.</div>
{% endfor %}
</div>
CSS：
.bar{
color:trans
浏览 11提问于2017-08-08得票数 2
回答已采纳
6回答
我有一个<div id="wrapper">容器，我的整个网站内容将在其中呈现。我尝试过使用css属性，比如margin:0 auto; on #wrapper，让div在垂直和水平方向居中。
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
}
通过使用上面的css，我可以使div位于屏幕的顶部，但如何使其居中(垂直)。当我在firefox中缩小时，我的div会在顶部的中心缩小，但我想要的东西应该始终显示在屏幕的中心，无论是垂直还是水平。
有人能建议我怎么才能得
浏览 0提问于2012-03-09得票数 38
回答已采纳
2回答
CSS垂直对中文本
、、、
我正在尝试垂直中心文本，我使用技巧与翻译。
<div class="first">
<div class="second">
<span>TESTING</span>
</div>
</div>
CSS
div.first > div.second {
border: 1px solid red;
height: 2em;
}
div.first > div.second > span{
position: relati
浏览 1提问于2014-08-28得票数 0
1回答
我有两个正试图垂直居中的span元素，我设法通过将行高与父元素的高度相匹配来对左元素进行居中，但是右边的元素具有浮动的风格:右不受行高变化的影响，这有什么原因吗?我如何垂直对浮动元素进行居中呢？
HTML
<div class='panel panel-default remove-radius slideshow-holder'>
<span id='slideshow_prev_button' class='glyphicon glyphicon-chevron-left'></span>
浏览 0提问于2015-02-22得票数 2
回答已采纳
5回答
我已经用谷歌搜索过很多次了，我不明白为什么我的div不会居中。
HTML：
<body><div id="mydiv"></div></body>
css
*{
margin:0;
padding:0;
}
html,body{height:100%; width:100%;}
#mydiv{
height:50%;
width:50%;
background:grey;
margin:au
浏览 0提问于2013-03-14得票数 1
回答已采纳
3回答
我正在开发我的网站的移动版本，我在垂直居中放置两个div时遇到了麻烦。因为它是一个移动网站，我的css需要在任何类型的屏幕分辨率上工作，所以这就是我遇到问题的地方。此外，根据您所在的页面，将使用不同的图像，因此图像的分辨率也不是静态的。我需要一种方法来居中我的图像div和文本div，无论他们的高度或宽度。
我在这里创建了一个。如你所见，我选择了green area作为手机的“屏幕”，我希望图片垂直居中，文本也位于图片顶部和垂直居中。有什么帮助吗？
到目前为止我所拥有的..。(在我的jsfiddle中)
HTML：
<div id = "screen">
&l
浏览 0提问于2013-11-20得票数 0
在阅读了这个之后，我想：
为什么在CSS3中没有一种单一的垂直对中方式？
为什么我不能用CSS属性做一个<div>，并使我的内容垂直居中呢？
浏览 2提问于2012-09-25得票数 2
回答已采纳
1回答
我有一个没有固定高度的div元素，我想让它在父元素中垂直居中，而不考虑它的高度。我在现代浏览器中使用了display: table-cell技术，但是这种技术在IE7及更低版本中似乎不起作用。有什么方法可以在IE7及以下版本中使用纯CSS实现这种垂直居中的效果吗？提前谢谢。
浏览 2提问于2012-08-30得票数 1
我有一个带Bootstrap的面板脚注。我使用css中的text-align属性将文本放在其中居中，还将其垂直居中(总是在css中)。下面是css代码：
.panel-footer{
padding: 0 15px;
height: 80px;
line-height: 80px;
text-align: center;
color: #777;
border: 1px solid;
border-color: #e7e7e7;
background-color: #FFFFFF;
}
这是html页面：
<div class="panel-fo
浏览 12提问于2017-07-14得票数 1
回答已采纳
5回答
我无法将我的文本设置为垂直居中。我的文本被放置在:绝对div的位置。
<div class="mydiv">Frameworks and Extensions</div>
和CSS：
.mydiv{
width:100px;
height:70px;
border:1px solid red;
position:absolute;
text-align:center;
background-color:#ccc;
}
请参阅小提琴：
有时文本会出现两行或一行。文本应垂直居中，如表td所示。
感谢您的
浏览 0提问于2013-11-20得票数 0
1回答
我需要在固定宽度和高度的块级元素内居中对齐图像(可变宽度和高度)。css标记如下所示：
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="50" height="60"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width=
浏览 4提问于2009-04-06得票数 2
回答已采纳
3回答
我有一个div和一些文本。为了让我的内容水平和垂直居中，我使用了css。它在火狐中运行良好，但在IE6中测试以下代码时，内容不会垂直居中。
因此，请指导我，我需要在我的css添加或更改。
我的html代码是
<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: green;
浏览 1提问于2010-12-07得票数 0
回答已采纳
3回答
我有一个div，它需要通过用css更改边距顶部来垂直居中。这个div将是动态的，我希望避免position:absolute.
HTML：
<div class="container">
<div class="exp">
<p>content</p>
<p>content</p>
</div>
</div>
jQuery：
var cHeight = $('.container').height();
浏览 1提问于2013-08-01得票数 0
我有一个标题
<h1>My Header</h1>
它的高度为150px，font-size为1.3em;，如何使用CSS使标题文本垂直居中。我不想把它包装在容器DIV中(包装DIV真的破坏了整个CSS的想法)。
浏览 9提问于2008-11-18得票数 1
回答已采纳
2回答
带纵横比的中心分割
、、、
我需要在html视图中居中放置一个Div。它应该在垂直和水平方向上都居中。但Div应该保持其宽高比(4/3)，并且最小边距为10px。
我做了一个Javascript：
function resizeWindow() {
var wHeight = $(document).height() - 20;
var wWidth = $(document).width() - 20;
var gameStage = $("#gameStage");
if ((wWidth / 4) * 3 <= wHeight) {
gameStage.css("width
浏览 0提问于2015-08-26得票数 3
1回答
我有一个已知宽度但高度未知的div ( height :auto)。
它需要动画到视图中，然后在浏览器中垂直和水平居中。它的父母是身体。
我使用animate.css CSS库来执行动画。
如果我使用平移将div居中，那么动画将div向下和向右偏移，然后，当动画完成时，它会“捕捉”回屏幕的中心。
我猜是不是和翻译有些冲突？
任何想法都将不胜感激。
浏览 25提问于2020-02-08得票数 0
如果我像这样设置div的CSS页边距属性：
div { margin-left: auto; margin-right: auto; }
我得到一个在页面中水平居中的div，。
但是，如果我将CSS更改为：
div { margin-top: auto; margin-bottom: auto; }
我的div不是垂直居中的。我不需要知道解决方法( )，但我想知道发生这种行为的原因。为什么上边距和下边距不能以相同的方式工作？我遗漏了什么？
浏览 1提问于2011-07-21得票数 20
回答已采纳
1回答
HTML
<div id="divTop">divTop</div>
<div id="divBottom">divBottom
<div id="divCenter">divCenter</div>
</div>
CSS
html, body{
height:100%;
}
#divTop{
height:50px;
background:#008080;
color:#ffffff;
text-align:center;
v
浏览 1提问于2013-07-15得票数 0
回答已采纳
我正在努力实现以下目标:我在页面的中央有一个垂直和水平的中间div (wrapper)。在该div中，我希望有另外2个div，其中一个将包含徽标，另一个将包含一些文本。徽标图像还必须与其div的中心垂直和水平对齐。目前，我所拥有的是：
下面是我的HTML和CSS的jsfiddle：
我如何才能使logo div居中(仅水平居中，并具有10px的页边距-顶部)，并使logo图像在该div内居中，水平和垂直居中，就像现在一样？
浏览 2提问于2012-10-16得票数 1
回答已采纳
我得到了以下html结构：
<div id = "carousel">
<div id="wrapper">
<div id="slides">
<div class="upper">
<ul>
<li></li>
.
a number of li's
.
</ul>
<
浏览 1提问于2013-01-02得票数 0
1回答
垂直和水平对齐
、、、
我的问题如下：
我垂直居中了一个div。但是，我想将另一个div水平居中。问题是我没有设法使它水平居中。
(X)HTML：
<body>
<div id="strut"></div>
<div id="page">
<div id="inner_page">
<h1>Galidie "jQzz" Clément</h1>
</div>
</div>
CSS：
html, body {
m
浏览 3提问于2012-10-20得票数 2
回答已采纳
3回答
我在使用了JsFiddle。我将其更改为将div显示为方形对话框(水平和垂直居中)。结果是在。
如你所见，水平居中很容易，但我不能让它垂直居中。有人知道如何用纯CSS做到这一点吗？
编辑代码如下：
<div class="blind">
<div class="wrapper">
<div class="main">
I'm your div with an aspect-ratio of 1:1!
</div>
<
浏览 0提问于2013-12-02得票数 0
有什么方法可以在MaterializeCSS中垂直对齐(中间)复选框及其标签吗？ -我希望复选框相对于蓝色框垂直居中。如果您从小提琴中移除物化，并使用普通的HTML/CSS，它就能工作。
谢谢你！！
物化版本： 0.100.2
HTML:
<form>
<div>
<input id="myinput" type="checkbox" />
<label for="myinput">
<div class="label-content">
浏览 0提问于2018-01-23得票数 1
回答已采纳
4回答
我试图在JQM页面的中间垂直和水平地对文本进行居中。使用1.4.5，默认主题。
在我的.css中有：
.splashDiv {
position: absolute;
top: 50%;
height: 50%;
width: 100%;
text-align: center;
padding:0;
}
HTML
<div class="splashDiv" data-role="page">
Please wait...
</div>
结果是：
只有在删除开发工具中的to
浏览 2提问于2017-03-30得票数 1
回答已采纳
下面的代码运行良好：
<div id="container">
<p>test</p>
</div>
#container{height:500px;display:table-cell;vertical-align:middle;}
但是当container元素具有css属性：float:left时
它不能工作！！
我只想在漂浮的时候垂直居中
浏览 0提问于2013-07-17得票数 0
回答已采纳
1回答
我有一个关于如何在html / css的div中居中显示文本的问题。我有一个这样的h3标签
<h3>Pacuraru Daniel Pacuraru Daniel</h3>
or
<h3>Pacuraru Daniel</h3>
和css
h3 {
width: 100%;
height: 28px;
display: block;
}
如果我有一个长度超过1行的名称，那么文本的2行适合div，但如果只有1行，我希望它垂直居中，而不是顶部对齐。
编辑:我有这个布局，我希望在这两个div中的文本垂直居中
浏览 0提问于2012-10-07得票数 0
7回答
我有以下HTML：
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outer是一个窄的垂直条带。div.inner旋转90度。我想要文本“居中？”在其容器div中居中显示。我事先不知道这两个div的大小。
这很接近：。您可以从jsfiddle中看到，在应用transform: rotate(-90deg)样式之前，文本垂直居中，但在应用之后，文本在垂直方向居中。当div.outer很短时，这一点尤其明显。
是
浏览 0提问于2013-02-28得票数 84
回答已采纳
1回答
有没有一种方法可以在固定大小的div中对可变大小的多行内容执行垂直居中，并隐藏溢出？
目标是重现您在Excel单元格中可以看到的内容:当内容适合容器时，它应该垂直居中，当它较大时，溢出的部分应该隐藏(并且内容仍然垂直对齐)，就像在相邻内容不为空的Excel单元格中一样。
我知道如何使用CSS垂直居中，我知道如何在内容不垂直居中时隐藏溢出，但我不知道如何同时做到这两个…Javascript是唯一的答案吗？
诀窍在于CSS定位方法不适用于可变大小的内容(我的内容是动态文本)，当您使用display:table-cell时，它会有效地禁用CSS溢出控制(容器会增长以容纳内容)。
浏览 1提问于2010-05-11得票数 2
回答已采纳
在jsFiddle上查看我的代码：
HTML代码：
<div>
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" width="276" height="110" alt="Google China">
</div>
CSS代码：
div {
height: 118px;
line-height: 118px;
background: red;
}
img {
vertic
浏览 2提问于2012-02-16得票数 2
回答已采纳
我设法使用了另一个用户的指令，并将文本垂直居中，但它不允许我将整个东西垂直居中。我想如果我把文本放在它自己的div中，它可以做到这一点，但它没有。我如何在箭头旁边的段落居中？
垂直对齐CSS非常令人困惑……
CSS
#arrow {
width:33px;
height:25px;
background-image:url('http://i.imgur.com/26tbf.png');
margin-left:55px;
background-position:0 50%;
float:le
浏览 0提问于2012-08-04得票数 0
回答已采纳
我试图在一个已知高度的div中垂直居中一个未知高度的文本。我已经尝试过css display: table-cell选项，但它不起作用，所以我使用jQuery来检测高度，然后在必要时应用上边距，以完成居中-这在需要调整某些东西时起作用，但不能将其重新调整为上边距为零。
这是我的函数：
function change_trend(){
trend_text = $('#trends_holder img:eq(' + item_count + ')').attr('data-content');
$(
浏览 2提问于2011-03-20得票数 0
回答已采纳
4回答
我想在浏览器中显示一幅图像，这样：
如果图像小于浏览器视图，则图像以水平和垂直方向居中。
如果图像大于视口，则缩小图像以填充尽可能多的视口，而不调整图像的纵横比。同样，图像是以水平和垂直方向居中。
我不想使用JavaScript；最好的/最语义的HTML和CSS是什么？
更新我被要求澄清语义:图像是内容，是HTML中的唯一内容。
解决方案
@GionaF的想法让我找到了一个快乐(非常简单)的解决方案：
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href=
浏览 6提问于2012-09-30得票数 13
回答已采纳
我目前通过flex在容器中垂直居中放置了三个元素： <div class="parent">
<div class="first">A</div>
<div class="second">B</div>
<div class="third">C</div>
</div> 使用CSS： .parent {
display: flex;
flex-direction: column;
jus
浏览 24提问于2019-01-12得票数 0
我的HTML中有一个div，如下所示：
<div id="audio"><span>فایل های صوتی</span></div>
这两个元素的CSS如下所示：
#audio{
width: 100%;
height: 11%;
background-color: #3F1954;
}
span{
font-size: 20px;
color: white;
text-align: center;
font-family: btitr;
}
我希望跨度在div中居中(水平和垂直)，当我放大或缩小我的页面时，它
浏览 2提问于2014-10-02得票数 2
2回答
好了，这是我的问题。我有一个348px宽的块，在右边144px，我想垂直居中图像。很简单，对吧？我的问题是我既不知道图像的高度，也不知道积木的高度。如何使图像垂直居中，使其通过容器顶部，而不使其成为背景图像？
CSS
#block { width: 348px; position: relative; }
#content { width: 164px; padding: 20px; margin-right: 144px; }
#image { width: 144px; position: absolute; right: 0; }
MARKUP
<div id="bloc
浏览 0提问于2012-06-27得票数 2
回答已采纳
在没有额外标记的情况下，我如何将背景图像添加到某个高度和宽度的div (从多个放在一起的精灵图像中拉出)，同时将其垂直和水平居中？当它是一个单独的图像时，它就是蛋糕：
HTML：
<div id="blog">
<div class="circle"></div>
</div>
CSS：
#blog .circle {
background-image: url("../img/blog.png") no-repeat center;
}
我想要达到相同的效果，使用单一的精灵为所有的
浏览 0提问于2014-06-27得票数 0
2回答
我很难在bootstrap 4列中对齐一些图像。我已经尝试使用CSS属性text-align: center，这将使图像水平居中。我的列占据了大量的视图端口，所以我还需要图像垂直居中。 下面是我的react组件返回的内容。class="img13“是我想要的中心。 <div id="border">
<div class="container">
<div class="row tower">
<div class="
浏览 65提问于2020-08-18得票数 1
回答已采纳
我想创建一个具有固定html结构的响应式页面，这样我就可以调整css了。我想创建垂直和水平居中的文本行。div应该完全覆盖父div。 我的HTML..。 <body>
<div class="parent">
<div class="d1">
one
</div>
<div class="d2">
two
</div>
<div class="d3">
three
浏览 19提问于2019-01-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
