文章/答案/技术大牛

发布

css漂浮居中

CSS 漂浮居中基础概念

CSS 漂浮居中是指通过 CSS 技术实现元素在其父容器中水平和垂直居中的效果。这种布局方式在网页设计中非常常见，可以用于标题、按钮、图片等元素的居中显示。

类型

Flexbox 布局：通过 display: flex 和 justify-content、align-items 属性实现居中。
Grid 布局：通过 display: grid 和 place-items 属性实现居中。
绝对定位：通过 position: absolute 和 transform 属性实现居中。
表格布局：通过 display: table 和 vertical-align 属性实现居中。

应用场景

页面标题：将页面标题居中显示，提升视觉效果。
按钮：将按钮居中显示，提升用户体验。
图片：将图片居中显示，使页面更加美观。
表单：将表单元素居中显示，提升表单的可读性和易用性。

示例代码

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;
            border: 1px solid black;
        }
        .centered {
            padding: 20px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered">居中显示的内容</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;
            border: 1px solid black;
        }
        .centered {
            padding: 20px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered">居中显示的内容</div>
    </div>
</body>
</html>

遇到的问题及解决方法

问题：Flexbox 布局在某些旧版浏览器中不兼容

原因：旧版浏览器对 Flexbox 的支持不完善，可能导致布局失效。

解决方法：使用 Autoprefixer 等工具自动添加浏览器前缀，或者使用旧版浏览器的兼容性写法。

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    border: 1px solid black;
}

问题：Grid 布局在某些移动设备上出现布局抖动

原因：移动设备上的渲染引擎可能存在性能问题，导致布局抖动。

解决方法：优化 CSS 代码，减少不必要的样式和嵌套；使用 will-change 属性提示浏览器提前优化。

.container {
    display: grid;
    place-items: center;
    height: 100vh;
    border: 1px solid black;
    will-change: transform;
}

参考链接

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

有帮助

没帮助

CSS:如何使水平列表居中？显示:内联不工作

css、menu、menuitem、centering、alignment

我想让我的css水平列表居中，仅此而已。ul.megaMenu { } display: inline;但它不会居中吗大约800px宽，当徽标居中并且菜单落到下一行时，但在移动菜单出现之前。

浏览 3提问于2012-07-03得票数 15

回答已采纳

1回答

在我的导航栏中心，我已经尝试了所有的东西

html、css、navigation、uinavigationbar、center

href="links.html">Links</a></li> </ul></div>浮动:右，左，没有在几乎所有的类

浏览 5提问于2013-07-30得票数 0

回答已采纳

1回答

wordpress混合主题集中页脚

wordpress

混合简单主题中的页脚是左对齐的，我希望它位于中心位置请帮助

浏览 0提问于2010-08-04得票数 0

1回答

当应用容器元素“浮动”时，“垂直对齐:中间”不起作用

css、vertical-alignment

test</p>但是当container元素具有css我只想在漂浮的时候垂直居中

浏览 0提问于2013-07-17得票数 0

回答已采纳

1回答

使用jQuery将一个div置于另一个div和窗口底部之间

jquery、css、center、vertical-alignment

| | ||----------------------| jQuery.fn.center = function () {this.css("top", (($(window).heightthis.outerHeight()) / 2) +

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

回答已采纳

2回答

使用浮动的li居中显示ul中的文本

html、css、width、parent-child、html-lists

我有一个UL，他的LIs漂浮在右边。我想在UL中居中对齐文本，但是我看到如果我不指定UL的宽度，它会认为它是100%，并且不会居中对齐LI。是否有一个CSS唯一的方法让UL居中它的LIs？带有上述LI的演示页面是

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

回答已采纳

2回答

将动态文本元素与css居中对齐

css、dynamic

我试图用动态宽度居中一个文本元素。"><img src="image" alt="Dip - hommus"><span class="recipethisweek">Dip - hommus</span>CSS

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

2回答

如何将div放置在中心并将其隐藏？

javascript、jquery、html、css

但我想不出如何用css居中。如果不影响主页面的div位置，它就不能工作。我只想让它漂浮在主页上。有人吗？

浏览 2提问于2009-12-04得票数 0

2回答

在浮动旁边居中对齐div

css、layout、html

我正在尝试在一个940px宽的页面中居中对齐一个div中的图像。class="logo" href="x"/> <li>blah</li>我让"topLinks“ul漂浮在右边我想居中的标志类相对于整个940px页面。我能够使徽标居中的唯一方法是使用ht

浏览 1提问于2011-07-04得票数 0

4回答

我的内容不能放进包装器中

html、css

</p> <p>Text Input:</p>.wrapper{ background-color:#666666

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

回答已采纳

1回答

如何在导航菜单中垂直居中显示汉堡图标？

html、css、media-queries

我有一个自定义导航菜单，我想包含网站徽标和一个汉堡图标，显示导航锚在小屏幕上，我正在使用媒体查询，我希望汉堡图标垂直居中，以便当我拉伸浏览器窗口时，它仍然居中，因为我在相同的媒体查询。/div><input type="checkbox" id="toggle"></input> 徽标

浏览 2提问于2017-10-09得票数 0

4回答

如何在页面上居中显示正文？

html、css、center、centering

基本上，在CSS中，我将body元素设置为display: inline-block;，以便它的宽度与其内容一样宽。这很好用。但是，margin: 0px auto;不会将它放在页面的中心。我希望蓝色的大方块在页面上居中，而不是像现在那样漂浮在左边。这是我的CSS： display: inline-block; text-align: center; }

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

回答已采纳

1回答

尝试使用CSS和Media查询进行浮动更改

html、css

这是我的CSS： float:left;margin:0 20px 20px 0; @media only screen and (min-device-width

浏览 1提问于2019-07-14得票数 0

回答已采纳

2回答

包含页边距和ul的基本css定位问题

css、positioning

我很困惑，为什么我的按钮saveBtn不是居中对齐的，而是因为某些原因它漂浮在我的ul上。任何帮助都将不胜感激。我只是试图更多地理解css的定位，因为对我来说，如果我设置一个20px的页边距-顶部应该是前一个div下的20px？

浏览 0提问于2011-08-14得票数 0

回答已采纳

4回答

CSS导航栏UL未居中

html、css、css-float

我正在学习如何根据这里的教程制作一个响应式的网站ul{display:inline-block;} nav{text-align:center;} 链接#pull将把UL推到左边，不再使它居中。我想让一个登录表单漂浮在NAV中UL的右侧，其中#pull现在就在我的生命中，我想不出如何做到这一点，同时保持UL完全在屏幕上居中，UL右侧的任何东西似乎都会将UL推过来，即使它应该始终居中。我确

浏览 0提问于2014-01-05得票数 0

1回答

对语义UI列内容进行对齐

reactjs、semantic-ui

问题 </Container> </Container>};向左漂浮沙箱连接

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

回答已采纳

1回答

文字在响应式设计中的位置

html、css、responsive-design、position

我有一个响应式布局，背景居中，没有指定宽度属性。现在我想要有一个div，它在背景图像内部对齐。回复#Jasper Seinhorst.. 超文本标记语言=>{if $header.copyright} <div class="copyrigh

浏览 2提问于2014-10-17得票数 0

2回答

在带有CSS的Div中居中的图像

css、css-float

嗨，我有一个包装images..The的div，这个DIV的宽度可以改变，所以我已经将它设置为100%在里面，我有图像/缩略图漂浮在左边，带边距或图像的右边和底部我需要图像居中，以便在左边和右边的空间是相同的。我可以用CSS来做这件事吗？

浏览 1提问于2011-11-29得票数 0

回答已采纳

1回答

div中的浮动链接会使图像在同一行上居中。

html、css

我也有一个文本链接到facebook，这是漂浮在右边。它们每个都使用以下css居中...问题是，当我将这个文本链接放在右边时，我的顶部图像不再居中。我想也许我需要清除浮动，但这不起作用，我做错了。感谢所有的建议。

浏览 1提问于2010-01-27得票数 0

2回答

如何使iframe居中？

html、css、iframe、centering

你可以清楚地看到没有居中的视差浮动div，在底部，html页面的iframe漂浮在右边，也没有居中。任何帮助都将不胜感激。

浏览 2提问于2016-07-21得票数 8

回答已采纳

点击加载更多

css漂浮居中