首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

如何水平居中<div>？

作者：有风吹过best | 2023-09-05 10:21
如何解决《如何水平居中<div>？》经验，为你挑选了42个好方法。

如何使用CSS

在另一个内部水平居中
？


  
Foo foo

Justin Polie.. 4550

您可以将此CSS应用于内部

:

#inner {
  width: 50%;
  margin: 0 auto;
}

当然,您不必设置width为50%.任何小于包含的宽度

都可以.该margin: 0 auto是什么呢实际定心.

如果你的目标是IE8 +,那么最好改为:

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中,并且无需设置特定的工作width.

这里的工作示例:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

  
Foo foo



1> Justin Polie..：

您可以将此CSS应用于内部

:

#inner {
  width: 50%;
  margin: 0 auto;
}

当然,您不必设置width为50%.任何小于包含的宽度

都可以.该margin: 0 auto是什么呢实际定心.

如果你的目标是IE8 +,那么最好改为:

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中,并且无需设置特定的工作width.

这里的工作示例:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

  
Foo foo


2> Alfred..：

如果您不想在内部设置固定宽度,div可以执行以下操作:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
  
    
Foo foo


3> Konga Raju..：

最好的方法是使用CSS 3.

盒子型号:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

根据您的可用性,您也可以使用这些box-orient, box-flex, box-direction属性.

Flex:


  
Foo foo

阅读有关居中子元素的更多信息

链接2

链接3

链接4

而这也解释了为什么盒模型是最好的办法:

为什么W3C盒型号更好？

在开始实施此解决方案之前,请务必先阅读[此答案](http://stackoverflow.com/a/16144913/1652962).
Safari,截至目前,仍然需要`-webkit`标志用于flexbox(`display:-webkit-flex;`和`-webkit-align-items:center;`和`-webkit-justify-content:center;`)

4> nuno_cruz..：

假设您的div很200px宽:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

确保父元素定位,即相对,固定,绝对或粘性.

如果您不知道div的宽度,可以使用transform:translateX(-50%);而不是负边距.

https://jsfiddle.net/gjvfxxdj/



5> Tom Maton..：

我创建了这个例子来展示如何纵向和横向 align.

代码基本上是这样的:

#outer {
  position: relative;
}

和...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

center当你重新调整屏幕大小时它会保持不变.

对于这种方法+1,我正要回答它.请注意,您必须在要水平居中的元素上声明宽度(如果垂直居中,则为高度).这是一个全面的解释:http://codepen.io/shshaw/full/gEiDt.垂直和/或水平对中元素的多功能和广泛支持的方法之一.
你不能在div中使用填充,但如果你想给幻觉使用相同颜色的边框.

6> Danield..：

一些海报提到了CSS 3的中心使用方式display:box.

此语法已过时,不应再使用.[另见本文].

因此,为了完整起见,这是使用Flexible Box布局模块集中在CSS 3中的最新方式.

所以如果你有简单的标记,如:


  
A

  
B

  
C

...并且您希望将项目置于框中,这是您在父元素(.box)上所需的内容:

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}


.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

  
A

  
B

  
C


7> Salman von A..：

如果您不想设置固定宽度而不想要额外的边距,请添加display: inline-block到您的元素中.

您可以使用:

#element {
    display: table;
    margin: 0 auto;
}

与display:inline-block相同的要求(http://www.quirksmode.org/css/display.html)

8> iamnotsam..：

以未知高度和宽度为中心

水平和垂直.它适用于相当现代的浏览器(Firefox,Safari/WebKit,Chrome,Internet Explorer 10,Opera等)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
This works with any content


9> gizmo..：

如果不给它宽度,它就不能居中,否则默认情况下整个水平空间.

如果你不知道宽度？说因为内容是动态的？

10> neoneye..：

CSS3的box-align属性

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

在开始实施此解决方案之前,请务必先阅读[此答案](http://stackoverflow.com/a/16144913/1652962).

11> Sneakyness..：

设置width并设置margin-left和margin-right到auto.但这仅适用于横向.如果你想要两种方式,你只需要两种方式.不要害怕尝试; 它不像你会打破任何东西.



12> James Moberg..：

我最近不得不将一个"隐藏"的div(即display:none;)居中,其中有一个表格形式,需要在页面上居中.我编写了以下jQuery来显示隐藏的div然后将CSS更新为自动生成的表格宽度并更改边距以使其居中.(通过单击链接触发显示切换,但不需要显示此代码.)

注意:我正在分享此代码,因为Google将我带到了这个Stack Overflow解决方案,除了隐藏的元素没有任何宽度并且在显示之前无法调整大小/居中之外,一切都会有效.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});





















    


    

        

            
            

                
                    devbox
                
            


            

                有风吹过best            


            

                这个屌丝很懒，什么也没留下！            

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有