css让div水平垂直居中

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页元素的布局、颜色、字体等样式。

类型

CSS的居中方法有多种，常见的有以下几种：

Flexbox布局：适用于现代浏览器，简单易用。
Grid布局：适用于二维布局，功能强大。
绝对定位：通过设置position: absolute和transform属性实现。
表格布局：通过设置display: table和display: table-cell实现。

应用场景

响应式设计：在不同设备上保持元素居中。
复杂布局：如仪表盘、仪表板等需要精确控制元素位置的场景。

示例代码

Flexbox布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Centering</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
        }
        .centered-div {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div"></div>
    </div>
</body>
</html>

Grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Centering</title>
    <style>
        .container {
            display: grid;
            place-items: center;
            height: 100vh;
            width: 100vw;
        }
        .centered-div {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered-div"></div>
    </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>Absolute Positioning Centering</title>
    <style>
        .container {
            position: relative;
            height: 100vh;
            width: 100vw;
        }
        .centered-div {
            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="centered-div"></div>
    </div>
</body>
</html>

遇到的问题及解决方法

问题：为什么使用Flexbox布局时，子元素没有居中？

原因：可能是父容器没有设置display: flex，或者没有设置justify-content和align-items属性。

解决方法：确保父容器设置了display: flex，并且设置了justify-content: center和align-items: center。

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

问题：为什么使用绝对定位时，子元素没有居中？

原因：可能是没有正确设置top、left和transform属性。

解决方法：确保设置了top: 50%、left: 50%，并且使用transform: translate(-50%, -50%)。

.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: lightcoral;
}

通过以上方法，可以有效地解决CSS中div水平垂直居中的问题。

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

有帮助

没帮助

居中排列排行榜广告

、、

已经应用了<div class="center">AD CODE</div>标记，尽管这似乎并没有起到作用…… 任何建议都将不胜感激，一如既往！谢谢。

浏览 1提问于2014-06-20得票数 0

2回答

如何使用CSS在div内对图像进行居中？

、

这是我的 <div id="loading"> </div> </div>我想让它垂直和水平地居中。该图像仅为水平居中，如下面的屏幕快

浏览 3提问于2017-04-29得票数 1

回答已采纳

3回答

图像完全居中？

、

我在div中有一个div和一个图像。图像大小会有所不同。有什么窍门吗？我可以使用php、css或Jquery。

浏览 2提问于2009-10-20得票数 3

回答已采纳

6回答

创建视区的div中心-水平和垂直

、、

我有一个<div id="wrapper">容器，我的整个网站内容将在其中呈现。我尝试过使用css属性，比如margin:0 auto; on #wrapper，让div在垂直和水平方向居中。#wrapper width:500px; margin:0 auto;} 通过使用上面的css，我可以使div位于屏幕的顶部，但如

浏览 0提问于2012-03-09得票数 38

回答已采纳

2回答

如何将引导柱垂直对中

、、

我想把这个文本垂直地和水平地放在一个容器内，它在一行和一个列中，设置为12，但我只能让它水平地而不是垂直地居中。我尝试了Flex，但是它将页面中的所有对象移动到中间，我只想让这个对象居中。HTML： <div class=

浏览 6提问于2016-12-13得票数 1

回答已采纳

1回答

固定宽度的页面布局，但可随内容调整

、

因为我已经满足于文本和表格，所以我想确保div不会剪切某些页面的内容。

浏览 0提问于2013-01-31得票数 0

回答已采纳

4回答

无法使用display:table使div居中对齐

、

我正在使用显示表格和表格单元格垂直对齐中间来使div居中对齐。但是center div的位置不是居中。小提琴：.landing-right { padding: 50px 0px; displayno-repeat; display: table-cell;

浏览 5提问于2017-05-20得票数 1

1回答

以Div为中心+固定insues的定位

、

我有一个div "general“，它位于页面的中心。在内部，我在顶部有一个固定的div。在div "general“之外，有固定在页面底部"footer”。到目前为止一切顺利..问题是div "content“必须在div "general”中垂直和水平居中。有人能给我一些定位的建议吗？="images/default.jpg" alt="Background&

浏览 0提问于2012-01-13得票数 0

回答已采纳

6回答

在大div中水平和垂直居中小div

、、

我的代码如下： <div id="smallDiv">DD</div>我的CSS如下： border: 1px solid; border: 1px solid black; width: 100px;} 我想

浏览 0提问于2013-01-11得票数 6

回答已采纳

1回答

在其他div内部居中对齐div，并在垂直和水平方向上居中对齐图像

、、

我正在努力实现以下目标:我在页面的中央有一个垂直和水平的中间div (wrapper)。在该div中，我希望有另外2个div，其中一个将包含徽标，另一个将包含一些文本。徽标图像还必须与其div的中心垂直和水平对齐。目前，我所拥有的是：下面是我的HTML和CSS的jsfiddle：我如何才能使logo div居中(仅水平居中，并具有10px的页边距-顶

浏览 2提问于2012-10-16得票数 1

回答已采纳

4回答

如何让div在没有脚本的情况下水平和垂直居中？

、

如何让div在没有脚本的情况下水平和垂直居中？只在CSS和HTML5上？ #center{width:500px; height:300px;}

浏览 1提问于2011-08-24得票数 1

回答已采纳

2回答

我创建了两个矩形div(需要保持60 of宽和150 of高)，其中包含文本。文本是垂直排列在矩形中的，所以我使用transform: rotate(-90deg)垂直对齐文本。我想让文字垂直和居中。在垂直旋转文本之前，我使用display: table和vertical-align: middle方法对文本进行居中。当文本是水平的时，这是完美的。但是，在旋转内容后，文本不会保持居中。CSS仍然将文

浏览 10提问于2016-03-30得票数 1

回答已采纳

8回答