<div>元素中的中心元素

要居中一个HTML元素，我可以使用CSS左:50%;。但是，这使得元素相对于整个窗口居中。

我有一个元素，它是<div>元素的子元素，我想让子元素以<div>这个父元素居中，而不是整个窗口。

我不希望容器<div>的所有内容居中，只是一个特定的子。

当前回答

指定text-align: center;到父对象并显示:inline-block;到div。

2013-09-30 11:05:08

其他回答

如果你想在div中居中，不关心除法大小，你可以使用Flex功能。我更喜欢使用flex，不使用元素的精确大小。

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

如你所见，Outer div是Flex容器，Inner必须是Flex项目，指定Flex: 1 1 auto;为了更好地理解，您可以看看这个简单的示例。http://jsfiddle.net/QMaster/hC223/

希望这对你有所帮助。

2014-06-29 09:38:47

div是固定宽度还是流体宽度?无论哪种方式，对于流体宽度，您可以使用:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

或者你可以设置父div为text-align:center;子div的text-align:left;。

和左:50%;当div设置为position:absolute时，只根据整个页面居中。如果你将div设置为左侧:50%;它应该相对于父div的宽度。对于固定宽度，这样做:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

2011-07-24 22:03:28

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>

2018-09-11 07:17:51

实际上，这在CSS3 flex boxes中是非常简单的。

.flex-container{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ justify-content: center; align-items: center; width: 400px; height: 200px; background-color: #3498db; } .inner-element{ width: 100px; height: 100px; background-color: #f1c40f; } <div class="flex-container"> <div class="inner-element"></div> </div>

更新:

似乎我在写这个答案的时候没有阅读OP编辑。上面的代码将所有内部元素居中(它们之间没有重叠)，但是OP只希望一个特定的元素居中，而不是其他内部元素。所以@Warface回答第二种方法更合适，但仍然需要垂直居中:

.flex-container{ position: relative; /* Other styling stuff */ width: 400px; height: 200px; background-color: #3498db; } .inner-element{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); /* or 3d alternative if you will add animations (smoother transitions) */ transform: translate3d(-50%,-50%,0); /* Other styling stuff */ width: 100px; height: 100px; background-color: #f1c40f; } <div class="flex-container"> <p>Other inner elements like this follows the normal flow.</p> <div class="inner-element"></div> </div>

2017-03-29 12:01:20

如果子元素是内联的(例如不是一个div，表格等)，我会把它包装在一个div或一个p，并使包装器的文本对齐css属性等于中心。

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

否则，如果元素是一个具有固定宽度的块(显示:块，例如div或p)，我将其左距和右距css属性设置为auto。

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

当然，您也可以向wrapper元素添加text-align: center，使其内容也居中。

我不会费心定位，因为依我之见，这不是OPs问题的解决方法，但一定要查看这个链接，非常有用。

2011-07-26 14:47:02

<div>元素中的中心元素

推荐文章

最新文章

标签