文章/答案/技术大牛

发布

css区块设置网页居中

CSS区块设置网页居中的基础概念

CSS（层叠样式表）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页元素的布局和外观。将网页区块居中是一种常见的布局需求，可以通过多种方式实现。

类型

水平居中：使元素在水平方向上居中。
垂直居中：使元素在垂直方向上居中。
水平和垂直居中：同时使元素在水平和垂直方向上居中。

应用场景

导航栏：将导航栏居中可以使用户更容易找到所需的功能。
标题：将标题居中可以使页面更加美观和突出重点。
表单：将表单居中可以使用户更容易填写信息。

实现方法

水平居中

<!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 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个水平居中的段落。</p>
    </div>
</body>
</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 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个垂直居中的段落。</p>
    </div>
</body>
</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 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个水平和垂直居中的段落。</p>
    </div>
</body>
</html>

常见问题及解决方法

问题：为什么使用`text-align: center;`无法垂直居中？

原因：text-align: center;只能实现水平居中，无法实现垂直居中。

解决方法：使用Flexbox布局，通过align-items: center;和justify-content: center;实现水平和垂直居中。

<!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 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个水平和垂直居中的段落。</p>
    </div>
</body>
</html>

参考链接

页面内容是否对你有帮助？

有帮助

没帮助

居中区块CSS

css、block、centering

如果我设置为5，则行，如果设置为4，则为3，等等。我修复了这个问题，这与边距有关。类别块稍微偏离中心，真的很烦人。下面是我使用的代码块的一些代码。任何帮助都将不胜感激。

浏览 3提问于2021-01-07得票数 1

1回答

为什么我的最小宽度和最大宽度不适用？

html、css、twitter-bootstrap、twitter-bootstrap-3

我有一个最小宽度和最大宽度应用在我的css下的媒体查询，使我的网页固定在某个理想的宽度。然而，我的页面似乎没有观察到我的宽度。我不知道为什么。这是我的代码以及它在大尺寸和小尺寸上的样子。

浏览 0提问于2018-04-24得票数 0

3回答

如何为所有屏幕尺寸的缩略图居中？

html、css、screen-size

body{ color:white; width:100%; min-width:334px; }示例页面的

浏览 0提问于2012-06-17得票数 0

回答已采纳

2回答

在PHP的Delphi中居中显示窗体

php、delphi4php、rpcl

我已经在RadPHP中创建了一个Delphi for PHP页面。怎样才能使它位于浏览器窗口的中心？

浏览 1提问于2010-10-22得票数 0

回答已采纳

1回答

Drupal7 webform

drupal-7、drupal-webform

我正在尝试更改有网页表单的页面的url。如果我这样做了，页面仍然有新的url，但是webform消失了。我该如何避免这种情况呢？谢谢

浏览 13提问于2017-08-29得票数 0

回答已采纳

2回答

Selenium/Java正在返回错误没有这样的元素:无法找到该元素

java、css、selenium、nosuchelementexception

我试图点击“新车辆搜索”在页面上，但在我看来，我有错误的网页元素定位器(XPath或CSS)。我尝试了所有可能的选项(CSS，XPath..)但没有成功，我犯了一个错误： driver.findElement(By.xpath("

浏览 6提问于2022-05-21得票数 0

1回答

广告不会在ie中居中，除非正文是文本对齐的: center

javascript、jquery、css、internet-explorer、centering

我有一个加载脚本的广告，它位于一个居中的div中。无论我做什么，ie6、ie7和ie8都不会将其居中，除非body现在div的css是这样设置的，它只能在chrome/firefox上工作：但是脚本不会从外部加载到chrome中，然后它会将整个页面的CSS设置为脚本的宽度。我也试着把它放在一个html页面中，并用jquery在一个居中的div中加载它，但它就在页

浏览 2提问于2011-07-12得票数 0

2回答

如何按照Photoshop中的设计将Bootstrap 1170px宽度更改为990px？

twitter-bootstrap、width

我已经下载了Bootstrap 3.0，它的默认宽度是1170px。我的布局设计在990px的宽度下。

浏览 1提问于2014-11-11得票数 1

1回答

在屏幕上居中分区，在IE11上不起作用，但在火狐上起作用

css、asp.net

使用css，我试图在屏幕上居中显示div包装器。它可以在Mozilla上运行，但不能在IE11上运行，我不知道为什么。我的网页在Windows Server 2008上运行。css { min-width:1250px; max-width:1250px;" type="text/css" rel="stylesheet" /&

浏览 1提问于2015-09-26得票数 0

3回答

试着把我的网页中心

asp.net、css、margin、center

可能重复：我正在尝试使用asp.net对我的网页进行中心设置。当我使用<center>标记时，它只以内容占位符为中心。但是当我使用CSS属性margin: 0 auto时，它什么也不做。有办法对整个页面进行居中吗？

浏览 5提问于2011-09-28得票数 0

2回答

我如何使它，使我的网站放大和输出，而不影响网站的布局从中心？

html、css

HTML和CSS如下所示。<meta charset="utf-8"/> <link href="https://fonts.googleapis.com

浏览 0提问于2018-03-18得票数 1

2回答

根据div的高度动态更改div的上边距

jquery

我有一个固定在我的网页边上的div。我需要div垂直居中。使用CSS很容易实现：(注意: div的基本高度是300px;)我遇到的问题是当导航打开以显示子元素时，它的高度会增加，这会扰乱居中。我需要一些jQuery来重新计算sidePanel分区的高度，并应用适当的负边距来保持分区居中。这是我玩过的jQuery： $("#sidePanel").css

浏览 0提问于2010-11-11得票数 3

回答已采纳

7回答

CSS响应中心分区

css、html、background、center

我想居中一些有背景图像的div。这个div的响应有问题，因为如果我将宽度设置为80%，高度设置为80%，bg-image不在中心。所以如果你看这张照片我想让这个白色区块响应。我已经编写了一小部分css，但目前是无响应的：left: 30%;position: absolute; background: url(images

浏览 0提问于2012-09-29得票数 7

回答已采纳

1回答

使网页居中并溢出

html、css

我知道如何使用CSS将网页居中，但我不知道如何在左侧和右侧都出现超大图像/滑块溢出的情况下将其居中。Square.com就是一个很好的例子。图像为1455px，但窗口容器设置为1020px。我尝试了所有我能想到的CSS代码版本，但是没有成功。1020px的容器通常会剪掉图像的两面。所以我希望你们能帮我写出实现这个结果的代码。

浏览 0提问于2013-02-13得票数 0

2回答

如何居中对齐iphone的最大比例视口缩放

ios、css、iphone、viewport

当我设置最大比例和来回旋转方向时，网页不会在手机上居中。<meta name="viewport" content="width=device-width; initial-scale=0; maximum-scale=2;"> 我怎样才能模仿空白区的CSS

浏览 0提问于2010-10-21得票数 5

回答已采纳

4回答

如何使用HTML/CSS在网页的左右两边添加空格

html、css、web

 我想在HTML文档中添加空格，就像橙色矩形中的空格。我不知道它的专业术语是什么。很抱歉。

浏览 4提问于2012-09-15得票数 7

回答已采纳

2回答

无法使用Animate.CSS或其他动画库将动画div居中

html、css、animation

我试图在页面中居中放置div并使其具有动画效果，但是将根本不起作用，因此它仅依赖于缺省值下面是我的HTML代码：<head> <link href="http://www.exaltedweb.com/refs/animate.css" rel="stylesheet"type="text/<e

浏览 4提问于2016-02-03得票数 1

1回答

打印时将元素居中

html、css

我有一个网页，其中所有的内容都集中使用一个包装器div。它显示得很好，但当它打印时，整个网页变得左对齐。我希望页面在工作表上居中。基本上，我拥有的是： Contentscontents div以如下方式使用CSS居中：#wrapper {width: 60%; margin-left: auto; margin-right: au

浏览 36提问于2011-06-07得票数 0

回答已采纳

3回答

链接需要在滑块底部居中。链接的文本是通过我正在使用的jQuery插件设置的，所以我只需要使用text-indent: -9999px来隐藏它，而显示一个背景图像。每个链接都设置为区块，宽度和高度均为10px。但是，我不能让它们在div中居中。这是我想做的事情的一个小图表。这3个项目符号代表我想要居中的链接。我希望他们居中，无论我是否有2个链接或10个链接。如果我有一组数量的链接，这可能会容易得多，因为我可以创建一个具有固定宽度的父元素，并在其上使用margin

浏览 0提问于2012-04-21得票数 1

回答已采纳

4回答

html div周围的边框

html、css

我真的不确定如何命名，但我只是试图在我的网页顶部放置一个区块。我使用div并通过CSS设置属性，但它的边框周围有一个边框。有人能帮我把这个去掉吗？我已经在我的CSS中尝试了以下所有方法，但是边框仍然存在。

浏览 0提问于2012-02-28得票数 0

点击加载更多

css区块设置网页居中